该文本展示了一个包含混搭动画效果的网页设计，主题围绕未来科技、数字艺术和未来城市。使用CSS动画和JavaScript实现动态效果，增强用户交互体验。页面包含多个分栏，每个分栏展示不同主题的内容和相关技术，配合视觉效果和按钮交互，提升整体美感和功能性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混搭动画效果</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
<style>
:root {
--primary-color: #00ff00;
--secondary-color: #ff00ff;
--background-color: #000000;
--text-color: #ffffff;
}
@keyframes neonPulse {
0%, 100% { text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); }
50% { text-shadow: 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color), 0 0 40px var(--secondary-color); }
}
@keyframes rotateIn {
from { transform: rotateY(90deg) scale(0.5); opacity: 0; }
to { transform: rotateY(0) scale(1); opacity: 1; }
}
@keyframes floatShake {
0%, 100% { transform: translateY(0) rotate(0); }
25% { transform: translateY(-10px) rotate(-5deg); }
75% { transform: translateY(10px) rotate(5deg); }
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: var(--text-color);
overflow-x: hidden;
}
.parallax-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax-background {
transform: translateZ(-1px) scale(2);
background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
}
h1 {
text-align: center;
color: var(--primary-color);
font-size: 3em;
margin: 40px 0;
animation: neonPulse 2s infinite, floatShake 5s ease-in-out infinite;
}
.column-container {
display: flex;
gap: 30px;
padding: 40px;
perspective: 1000px;
}
.column {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
animation: rotateIn 1s forwards;
opacity: 0;
transform-style: preserve-3d;
}
.column:nth-child(1) { animation-delay: 0.2s; }
.column:nth-child(2) { animation-delay: 0.4s; }
.column:nth-child(3) { animation-delay: 0.6s; }
.column:hover {
transform: translateY(-20px) rotateY(10deg);
box-shadow: 0 15px 35px rgba(0, 255, 0, 0.2);
}
h2 {
color: var(--secondary-color);
border-bottom: 2px solid var(--secondary-color);
padding-bottom: 10px;
transition: color 0.3s ease;
}
.column:hover h2 {
color: var(--primary-color);
text-shadow: 0 0 10px var(--primary-color);
}
img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 20px;
transition: transform 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.column:hover img {
transform: scale(1.05) rotate(3deg);
}
.btn {
display: inline-block;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: var(--text-color);
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
margin-top: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 255, 0, 0.4);
}
.btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.1);
transform: rotate(45deg);
transition: all 0.3s ease;
}
.btn:hover::before {
left: 100%;
}
@media (max-width: 768px) {
.column-container {
flex-direction: column;
}
.column {
opacity: 1;
transform: none;
animation: none;
}
.column:hover {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<div class="parallax-container">
<div class="parallax-layer parallax-background"></div>
<div class="parallax-layer">
<h1>超动态分栏式布局</h1>
<div class="column-container">
<div class="column">
<h2>未来科技</h2>
<img src="/api/placeholder/400/300" alt="未来科技概念图" id="techImage">
<p>探索前沿科技，从量子计算到脑机接口，了解塑造未来世界的创新技术。</p>
<ul>
<li>人工智能与机器学习</li>
<li>可再生能源革命</li>
<li>太空探索与殖民</li>
</ul>
<a href="#" class="btn" id="techBtn">深入未来</a>
</div>
<div class="column">
<h2>数字艺术</h2>
<img src="/api/placeholder/400/300" alt="数字艺术作品" id="artImage">
<p>融合技术与创意，数字艺术正在重新定义我们对美的理解和艺术的边界。</p>
<ul>
<li>生成艺术与AI创作</li>
<li>虚拟现实艺术体验</li>
<li>NFT与数字收藏品</li>
</ul>
<a href="#" class="btn" id="artBtn">体验艺术</a>
</div>
<div class="column">
<h2>未来城市</h2>
<img src="/api/placeholder/400/300" alt="未来城市概念图" id="cityImage">
<p>智能、可持续、宜居，未来城市将如何重塑我们的生活方式和社会结构？</p>
<ul>
<li>智能交通系统</li>
<li>垂直农业与城市绿化</li>
<li>自给自足的能源系统</li>
</ul>
<a href="#" class="btn" id="cityBtn">探索城市</a>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('mousemove', (e) => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
btn.style.setProperty('--x', `${x}px`);
btn.style.setProperty('--y', `${y}px`);
});
});
document.querySelectorAll('.column').forEach(column => {
column.addEventListener('mousemove', (e) => {
const rect = column.getBoundingClientRect();
const x = (e.clientX - rect.left) / column.offsetWidth;
const y = (e.clientY - rect.top) / column.offsetHeight;
const rotateX = (y - 0.5) * 10;
const rotateY = (x - 0.5) * 10;
column.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;
});
column.addEventListener('mouseleave', () => {
column.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
});
});
function changeImage(id) {
const img = document.getElementById(id);
img.src = `/api/placeholder/${400 + Math.floor(Math.random() * 100)}/${300 + Math.floor(Math.random() * 100)}`;
}
document.getElementById('techBtn').addEventListener('click', (e) => {
e.preventDefault();
changeImage('techImage');
});
document.getElementById('artBtn').addEventListener('click', (e) => {
e.preventDefault();
changeImage('artImage');
});
document.getElementById('cityBtn').addEventListener('click', (e) => {
e.preventDefault();
changeImage('cityImage');
});
</script>
</body>
</html>
