c0e93dbfc5
This commit completely revamps the page, transitioning from a simple static design to a modern, dynamic, and interactive experience with a glassmorphism aesthetic. Key additions include: - **Visual Redesign:** Implemented a dark, 'glassmorphism' theme with blurred backgrounds, gradient text, and enhanced hover effects. - **Interactive Theme Switcher:** Added a JavaScript-powered feature allowing users to dynamically change the page's color scheme. - **Dynamic Backgrounds:** Introduced a JavaScript-powered particle animation and CSS-animated decorative shapes to create a more lively and engaging background. - **Improved Typography:** Switched to 'Noto Sans SC' for better readability and aesthetics. - **Enhanced Layout:** Refined the overall structure and responsiveness for a more polished user experience on all devices.
523 lines
16 KiB
HTML
523 lines
16 KiB
HTML
<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Noto Sans SC', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
|
|
color: #f8f8f8;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* 背景装饰元素 */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.decoration-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.1;
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3);
|
|
animation: float 15s infinite ease-in-out;
|
|
}
|
|
|
|
.circle-1 {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: -100px;
|
|
left: -100px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.circle-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
bottom: -50px;
|
|
right: -50px;
|
|
animation-delay: -5s;
|
|
}
|
|
|
|
.circle-3 {
|
|
width: 150px;
|
|
height: 150px;
|
|
top: 50%;
|
|
left: 70%;
|
|
animation-delay: -10s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(20px, 30px) scale(1.05); }
|
|
50% { transform: translate(-15px, 15px) scale(0.95); }
|
|
75% { transform: translate(-20px, -10px) scale(1.02); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 25px;
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
padding: 50px 40px;
|
|
animation: fadeIn 1.5s ease-out;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(30px) scale(0.95); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(to right, #6e8efb, #a777e3, #fc466b);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.4rem;
|
|
color: #ccc;
|
|
margin-bottom: 40px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.divider {
|
|
height: 3px;
|
|
width: 100px;
|
|
background: linear-gradient(to right, #6e8efb, #a777e3);
|
|
margin: 0 auto 40px;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
}
|
|
|
|
.divider::before, .divider::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #6e8efb;
|
|
top: -3.5px;
|
|
}
|
|
|
|
.divider::before {
|
|
left: 0;
|
|
}
|
|
|
|
.divider::after {
|
|
right: 0;
|
|
}
|
|
|
|
.content-box {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
margin: 40px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.content-box:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.content-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 5px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, #6e8efb, #a777e3);
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2.2rem;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
padding: 20px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
display: inline-block;
|
|
margin: 25px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.original-text:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 1.5rem;
|
|
margin: 0 10px;
|
|
color: #6e8efb;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 25px;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.feature {
|
|
background: rgba(255, 255, 255, 0.07);
|
|
padding: 30px 25px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.feature:hover {
|
|
transform: translateY(-8px);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.feature i {
|
|
font-size: 3rem;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(to right, #6e8efb, #a777e3);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.feature h3 {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 15px;
|
|
color: #fff;
|
|
}
|
|
|
|
.feature p {
|
|
color: #ccc;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.interactive-section {
|
|
margin: 40px 0;
|
|
padding: 30px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.color-toggle {
|
|
display: inline-flex;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 10px;
|
|
border-radius: 50px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.color-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.color-btn.active {
|
|
border-color: white;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.color-1 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
|
|
.color-2 { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); }
|
|
.color-3 { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); }
|
|
.color-4 { background: linear-gradient(135deg, #00416a, #e4e5e6); }
|
|
|
|
footer {
|
|
margin-top: 50px;
|
|
color: #aaa;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
background: linear-gradient(to right, #6e8efb, #a777e3);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.features {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 粒子效果 */
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
animation: float-particle 15s infinite linear;
|
|
}
|
|
|
|
@keyframes float-particle {
|
|
0% {
|
|
transform: translateY(0) translateX(0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) translateX(100px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 背景装饰 -->
|
|
<div class="bg-decoration">
|
|
<div class="decoration-circle circle-1"></div>
|
|
<div class="decoration-circle circle-2"></div>
|
|
<div class="decoration-circle circle-3"></div>
|
|
</div>
|
|
|
|
<!-- 粒子背景 -->
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<div class="container">
|
|
<h1>极简美学</h1>
|
|
<p class="subtitle">简约之中见非凡，空灵之处显意境</p>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="content-box">
|
|
<p>原始内容被重新赋予艺术生命：</p>
|
|
<div class="original-text">
|
|
<i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
|
|
</div>
|
|
<p>在极简主义中，空白本身就是一种设计语言</p>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<i class="fas fa-paint-brush"></i>
|
|
<h3>现代美学</h3>
|
|
<p>采用最新的玻璃态设计，融合微交互与动效</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
<h3>全响应式</h3>
|
|
<p>在任何设备上都能提供完美的视觉体验</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-bolt"></i>
|
|
<h3>极致性能</h3>
|
|
<p>精心优化的代码确保流畅的动画与快速加载</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="interactive-section">
|
|
<h3>选择主题色彩</h3>
|
|
<div class="color-toggle">
|
|
<div class="color-btn color-1 active" data-theme="default"></div>
|
|
<div class="color-btn color-2" data-theme="sunset"></div>
|
|
<div class="color-btn color-3" data-theme="fire"></div>
|
|
<div class="color-btn color-4" data-theme="silver"></div>
|
|
</div>
|
|
<p>点击上方色块切换页面主题色彩</p>
|
|
</div>
|
|
|
|
<p class="subtitle">少即是多，空即是满，无即是有</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 极致简约美学 | 设计于当下，着眼于未来</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-dribbble"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 创建粒子背景
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 30;
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
|
|
// 随机大小和位置
|
|
const size = Math.random() * 10 + 2;
|
|
const posX = Math.random() * 100;
|
|
const duration = Math.random() * 10 + 10;
|
|
const delay = Math.random() * -20;
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.animationDuration = `${duration}s`;
|
|
particle.style.animationDelay = `${delay}s`;
|
|
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// 主题切换功能
|
|
function setupThemeToggle() {
|
|
const colorButtons = document.querySelectorAll('.color-btn');
|
|
|
|
colorButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// 移除所有active类
|
|
colorButtons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// 添加active类到当前按钮
|
|
this.classList.add('active');
|
|
|
|
// 根据选择切换主题
|
|
const theme = this.getAttribute('data-theme');
|
|
changeTheme(theme);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 切换主题函数
|
|
function changeTheme(theme) {
|
|
const body = document.body;
|
|
|
|
// 移除所有可能的主题类
|
|
body.classList.remove('theme-sunset', 'theme-fire', 'theme-silver');
|
|
|
|
// 根据主题添加对应的类
|
|
if (theme !== 'default') {
|
|
body.classList.add(`theme-${theme}`);
|
|
}
|
|
|
|
// 根据主题更新背景渐变
|
|
switch(theme) {
|
|
case 'sunset':
|
|
body.style.background = 'linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b)';
|
|
break;
|
|
case 'fire':
|
|
body.style.background = 'linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d)';
|
|
break;
|
|
case 'silver':
|
|
body.style.background = 'linear-gradient(135deg, #00416a, #e4e5e6)';
|
|
break;
|
|
default:
|
|
body.style.background = 'linear-gradient(135deg, #0f2027, #203a43, #2c5364)';
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
createParticles();
|
|
setupThemeToggle();
|
|
|
|
// 为原始文本添加点击动画
|
|
const originalText = document.querySelector('.original-text');
|
|
originalText.addEventListener('click', function() {
|
|
this.style.transform = 'scale(1.1)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 300);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |