森林蝴蝶飞舞特效

原创已于 2025-06-27 13:18:33 修改 · 646 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-10 13:29:42 首次发布

<!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;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB, #1E90FF);
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

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

/* 树木背景 */
.tree {
position: absolute;
bottom: 0;
}

.tree-1 {
left: 10%;
height: 300px;
width: 150px;
background: linear-gradient(to right, #2E8B57, #3CB371);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree-2 {
right: 15%;
height: 400px;
width: 200px;
background: linear-gradient(to right, #228B22, #32CD32);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree-3 {
left: 30%;
height: 250px;
width: 120px;
background: linear-gradient(to right, #006400, #008000);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 地面 */
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to bottom, #8B4513, #A0522D);
}

/* 蝴蝶样式 */
.butterfly {
position: absolute;
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
z-index: 10;
animation: flutter 5s infinite ease-in-out;
}

/* 蝴蝶翅膀动画 */
.butterfly::before, .butterfly::after {
content: '';
position: absolute;
width: 20px;
height: 30px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,165,0,0.6));
animation: wingFlap 0.2s infinite alternate;
}

.butterfly::before {
left: 0;
transform-origin: right center;
}

.butterfly::after {
right: 0;
transform-origin: left center;
}

/* 不同颜色的蝴蝶 */
.butterfly.blue::before, .butterfly.blue::after {
background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(30,144,255,0.6));
}

.butterfly.pink::before, .butterfly.pink::after {
background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,105,180,0.6));
}

.butterfly.purple::before, .butterfly.purple::after {
background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(147,112,219,0.6));
}

/* 动画效果 */
@keyframes flutter {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(50px, -20px) rotate(5deg);
}
50% {
transform: translate(100px, 0) rotate(0deg);
}
75% {
transform: translate(50px, 20px) rotate(-5deg);
}
}

@keyframes wingFlap {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(60deg);
}
}

/* 标题样式 */
.title {
position: absolute;
top: 20px;
color: white;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
font-size: 2rem;
z-index: 100;
}

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

.footer-link:hover {
color: white;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* 云朵 */
.cloud {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
}

.cloud-1 {
width: 100px;
height: 60px;
top: 15%;
left: 10%;
animation: cloudMove 30s linear infinite;
}

.cloud-2 {
width: 150px;
height: 90px;
top: 25%;
right: 10%;
animation: cloudMove 40s linear infinite reverse;
}

.cloud-3 {
width: 80px;
height: 50px;
top: 30%;
left: 30%;
animation: cloudMove 25s linear infinite;
}

@keyframes cloudMove {
0% {
transform: translateX(-150px);
}
100% {
transform: translateX(calc(100vw + 150px));
}
}
</style>
</head>
<body>
<div class="forest-scene">
<h1 class="title">森林蝴蝶飞舞</h1>


<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>


<div class="tree tree-1"></div>
<div class="tree tree-2"></div>
<div class="tree tree-3"></div>


<div class="ground"></div>




</div>

// 创建多只蝴蝶
for (let i = 0; i < 8; i++) {
createButterfly();
}

// 点击屏幕添加更多蝴蝶
document.addEventListener('click', (e) => {
if (e.target.className !== 'butterfly') {
createButterfly();
}
});
</script>
</body>
</html>