mirror of
https://github.com/ldxw/cdn.git
synced 2026-08-14 04:51:24 +08:00
add
This commit is contained in:
ldxw
@@ -0,0 +1,42 @@
|
||||
# jsdelivr HomePage cdn
|
||||
|
||||
[](https://www.jsdelivr.com/package/gh/ldxw/cdn)
|
||||
|
||||
# 🏠 HomePage
|
||||
|
||||
✨ **项目简介**
|
||||
- 毛玻璃风格设计卡片风格
|
||||
- 响应式布局适配移动端访问
|
||||
- 动态社交链接交互效果
|
||||
- 优雅的联系方式弹窗
|
||||
|
||||
🛠️ **技术栈**
|
||||
- HTML5语义化标签
|
||||
- CSS3动画与毛玻璃效果
|
||||
- Font Awesome图标库
|
||||
|
||||
## 🌟 功能特性
|
||||
- 📱 完美移动端适配
|
||||
- 🌓 智能配色切换
|
||||
- ✨ 流畅的交互动效
|
||||
|
||||
## 🖼️ 预览效果
|
||||
<div align="center">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## 🚀 使用指南
|
||||
1. 克隆仓库
|
||||
```bash
|
||||
git clone https://github.com/LangfordKuo/HomePage.git
|
||||
```
|
||||
2. 直接使用现代浏览器打开`index.html`
|
||||
3. 点击「联系方式」图标体验弹窗交互
|
||||
|
||||
## 📜 开源协议
|
||||
本项目采用 [GPL-3.0 License](LICENSE) 授权
|
||||
|
||||
> 💡 提示：所有图标资源来自[Font Awesome](https://fontawesome.com)
|
||||
|
||||
> 💡 提示：README使用AI生成
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
@@ -0,0 +1,284 @@
|
||||
/* 基础样式重置 */
|
||||
:root {
|
||||
--primary-color: #2c3e50;
|
||||
--accent-color: #3498db;
|
||||
--text-color: #333;
|
||||
--bg-gradient-start: #f5f7fa;
|
||||
--bg-gradient-end: #c3cfe2;
|
||||
--main-bg: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #dfe6ec;
|
||||
--text-color: #e0e0e0;
|
||||
--bg-gradient-start: #2c3e50;
|
||||
--bg-gradient-end: #3498db;
|
||||
--main-bg: rgba(40, 44, 52, 0.98);
|
||||
--shadow-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color);
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 15px 15px 0 0;
|
||||
background: var(--main-bg);
|
||||
backdrop-filter: blur(5px);
|
||||
box-shadow: 0 -2px 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: var(--main-bg);
|
||||
padding: 2.5rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin: 0 auto 1.5rem;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: rotate(0deg) scale(1); }
|
||||
25% { transform: rotate(3deg) scale(1.1); }
|
||||
75% { transform: rotate(-3deg) scale(1.1); }
|
||||
100% { transform: rotate(0deg) scale(1); }
|
||||
|
||||
}
|
||||
|
||||
.avatar-container:hover .avatar {
|
||||
animation: shake 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: var(--primary-color);
|
||||
margin: 0 0 0.8rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.bio {
|
||||
color: var(--text-color);
|
||||
margin: 0 0 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 25px;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.social-link::after {
|
||||
content: attr(data-hover-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover::after {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.social-link:hover span,
|
||||
.social-link:hover i {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.social-link span {
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-link i {
|
||||
margin-right: 0.8rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--main-bg);
|
||||
color: var(--text-color);
|
||||
padding: 2rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
position: relative;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.contact-info p {
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.profile-card {
|
||||
padding: 1rem;
|
||||
margin: 0.5rem 0.5rem 60px;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
background: var(--main-bg);
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||||
border-radius: 0;
|
||||
transform: none;
|
||||
backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-width: 95vw;
|
||||
padding: 1rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bio {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin-top: auto;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>默认主页</title>
|
||||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/ldxw/cdn@master/static/Home-Page/css/style.css">
|
||||
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="profile-card">
|
||||
<div class="avatar-container">
|
||||
<img src="https://gcore.jsdelivr.net/gh/ldxw/cdn/@master/static/Home-Page/avatar.jpg" alt="个人头像" class="avatar">
|
||||
</div>
|
||||
<h1 class="name">默认主页</h1>
|
||||
<!--<p class="bio">飞舞开发者 | 台球爱好者 | 开源灌水者</p>
|
||||
<div class="social-links">
|
||||
<a href="https://kj.ldxw.de" target="_blank" class="social-link" data-hover-text="前往小窝主机">
|
||||
<i class="fab fa-xiaowoidc"></i>
|
||||
<span>小窝主机</span>
|
||||
</a>
|
||||
<a href="https://ucany.net" target="_blank" class="social-link" data-hover-text="前往站长的博客">
|
||||
<i class="fas fa-blog"></i>
|
||||
<span>站长博客</span>
|
||||
</a>
|
||||
<a href="#" class="social-link contact-trigger" data-hover-text="发送消息给站长">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<span>联系方式</span>
|
||||
</a>-->
|
||||
</div>
|
||||
</header>
|
||||
<!--<div class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close">×</button>
|
||||
<h3>📬 联系站长</h3>
|
||||
<div class="contact-info">
|
||||
<p><i class="fas fa-envelope"></i> 邮箱：langfordkuo@foxmail.com</p>
|
||||
<p><i class="fab fa-qq"></i> QQ：1244486871</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<script>
|
||||
document.querySelector('.contact-trigger').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.querySelector('.modal-overlay').classList.add('active');
|
||||
});
|
||||
|
||||
document.querySelector('.modal-close').addEventListener('click', () => {
|
||||
document.querySelector('.modal-overlay').classList.remove('active');
|
||||
});
|
||||
|
||||
document.querySelector('.modal-overlay').addEventListener('click', (e) => {
|
||||
if (e.target === document.querySelector('.modal-overlay')) {
|
||||
document.querySelector('.modal-overlay').classList.remove('active');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<center><footer class="site-footer">
|
||||
© 2025 默认主页
|
||||
</footer></center>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user