CSS3雾气飞过动画特效

原创已于 2025-06-27 13:20:00 修改 · 394 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-10 13:09:13 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3雾气飞过动画特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
overflow: hidden;
font-family: Arial, sans-serif;
}

.scene {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

/* 雾气效果 */
.fog {
position: absolute;
width: 100%;
height: 100%;
}

.fog-layer {
position: absolute;
width: 200%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="fogFilter"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0"/></filter><rect width="100" height="100" filter="url(%23fogFilter)" fill="white"/></svg>');
opacity: 0.5;
animation: fog-move 60s linear infinite;
}

.fog-layer:nth-child(1) {
top: 20%;
animation-duration: 40s;
animation-delay: -10s;
opacity: 0.4;
}

.fog-layer:nth-child(2) {
top: 50%;
animation-duration: 50s;
animation-delay: -5s;
opacity: 0.3;
}

.fog-layer:nth-child(3) {
top: 70%;
animation-duration: 60s;
opacity: 0.2;
}

@keyframes fog-move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

/* 内容区域 */
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 10;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

h1 {
font-size: 3rem;
margin-bottom: 20px;
}

p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}

/* 底部链接 */
.footer-link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
z-index: 10;
transition: opacity 0.3s;
}

.footer-link:hover {
color: white;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="scene">

<div class="fog">
<div class="fog-layer"></div>
<div class="fog-layer"></div>
<div class="fog-layer"></div>
</div>


<div class="content">
<h1>迷雾之境</h1>
<p>雾气缭绕，如梦如幻，感受大自然的奇妙魅力</p>
</div>


</div>
</body>
</html>