css制作蝴蝶飞
CSS蝴蝶飞动画实现
使用CSS制作蝴蝶飞动画可以通过关键帧动画和变形属性实现。以下是一个完整的实现方案：
HTML结构
<div class="butterfly">
<div class="left-wing"></div>
<div class="right-wing"></div>
<div class="body"></div>
</div>CSS样式
.butterfly {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 80px;
}
.body {
position: absolute;
width: 10px;
height: 40px;
background-color: #333;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
}
.left-wing, .right-wing {
position: absolute;
width: 40px;
height: 60px;
background-color: #ff69b4;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
top: -10px;
}
.left-wing {
left: 0;
transform-origin: right center;
animation: flap-left 0.5s infinite alternate;
}
.right-wing {
right: 0;
transform-origin: left center;
animation: flap-right 0.5s infinite alternate;
}
@keyframes flap-left {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(60deg);
}
}
@keyframes flap-right {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-60deg);
}
}添加飞行路径动画
.butterfly {
animation: fly 10s linear infinite;
}
@keyframes fly {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(200px, -100px) rotate(10deg);
}
50% {
transform: translate(400px, 0) rotate(0deg);
}
75% {
transform: translate(200px, 100px) rotate(-10deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}增强视觉效果
可以添加渐变颜色和阴影增强蝴蝶的真实感：
.left-wing, .right-wing {
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}这个实现创建了一个简单的蝴蝶造型，翅膀通过3D旋转实现拍打效果，整个蝴蝶沿着预设路径飞行。可以根据需要调整颜色、大小和动画参数来获得不同的视觉效果。
