动态页脚特效

原创已于 2025-06-27 15:28:42 修改 · 436 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-30 14:51:52 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态页脚特效</title>
<style>
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
}

.content {
flex: 1;
padding: 20px;
}

.dynamic-footer {
background: linear-gradient(135deg, #2c3e50, #4ca1af);
color: white;
padding: 30px 0;
text-align: center;
position: relative;
overflow: hidden;
}

.footer-content {
position: relative;
z-index: 2;
}

.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}

.footer-links a {
color: white;
text-decoration: none;
transition: all 0.3s ease;
}

.footer-links a:hover {
color: #f1c40f;
transform: translateY(-3px);
}

.copyright {
font-size: 14px;
opacity: 0.8;
}

/* 动态背景元素 */
.footer-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}

.bubble {
position: absolute;
bottom: -100px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: rise 15s infinite ease-in;
}

.bubble:nth-child(1) {
width: 40px;
height: 40px;
left: 10%;
animation-duration: 8s;
}

.bubble:nth-child(2) {
width: 20px;
height: 20px;
left: 20%;
animation-duration: 5s;
animation-delay: 1s;
}

.bubble:nth-child(3) {
width: 50px;
height: 50px;
left: 35%;
animation-duration: 7s;
animation-delay: 2s;
}

.bubble:nth-child(4) {
width: 30px;
height: 30px;
left: 50%;
animation-duration: 11s;
animation-delay: 0s;
}

.bubble:nth-child(5) {
width: 25px;
height: 25px;
left: 65%;
animation-duration: 6s;
animation-delay: 1s;
}

.bubble:nth-child(6) {
width: 45px;
height: 45px;
left: 75%;
animation-duration: 8s;
animation-delay: 3s;
}

.bubble:nth-child(7) {
width: 15px;
height: 15px;
left: 90%;
animation-duration: 9s;
animation-delay: 2s;
}

@keyframes rise {
0% {
bottom: -100px;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
bottom: 100%;
transform: translateX(-100px);
}
}

/* 心跳动画 */
.heartbeat {
display: inline-block;
animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="content">
<h1>网页主要内容</h1>
<p>这里是网页的主要内容区域。</p>
</div>

<footer class="dynamic-footer">
<div class="footer-bubbles">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>

<div class="footer-content">
<div class="footer-links">
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">服务</a>
<a href="#">产品</a>
<a href="#">联系我们</a>
</div>

<p class="copyright">
© <span class="heartbeat">2023</span> 公司名称. 保留所有权利.
</p>
</div>
</footer>

<script>
// 动态添加更多气泡
document.addEventListener('DOMContentLoaded', function() {
const bubblesContainer = document.querySelector('.footer-bubbles');

for (let i = 0; i < 5; i++) {
const bubble = document.createElement('div');
bubble.classList.add('bubble');

// 随机大小
const size = Math.random() * 30 + 10;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;

// 随机位置
bubble.style.left = `${Math.random() * 100}%`;

// 随机动画时间和延迟
const duration = Math.random() * 10 + 5;
const delay = Math.random() * 5;
bubble.style.animationDuration = `${duration}s`;
bubble.style.animationDelay = `${delay}s`;

bubblesContainer.appendChild(bubble);
}

// 鼠标移动效果
const footer = document.querySelector('.dynamic-footer');
footer.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;

footer.style.background = `linear-gradient(${x * 360}deg, #2c3e50, #4ca1af)`;
});
});
</script>
</body>
</html>