当前位置：首页 > CSS

css制作蝴蝶飞

2026-03-11 22:41:49CSS

CSS制作蝴蝶飞动画

通过CSS的@keyframes和transform属性可以实现蝴蝶飞舞的动画效果。以下是一个完整的实现方案：

css制作蝴蝶飞

HTML结构

创建一个包含蝴蝶翅膀和身体的简单HTML结构：

css制作蝴蝶飞

<div class="butterfly">
  <div class="wings left-wing"></div>
  <div class="wings right-wing"></div>
  <div class="body"></div>
</div>

CSS样式

添加基础样式和动画效果：

.butterfly {
  position: relative;
  width: 100px;
  height: 100px;
  animation: fly 5s infinite alternate ease-in-out;
}

.body {
  position: absolute;
  width: 10px;
  height: 40px;
  background: #333;
  top: 30px;
  left: 45px;
  border-radius: 5px;
}

.wings {
  position: absolute;
  width: 40px;
  height: 50px;
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.left-wing {
  left: 5px;
  top: 20px;
  transform-origin: right center;
  animation: flap-left 0.5s infinite alternate;
}

.right-wing {
  right: 5px;
  top: 20px;
  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); }
}

@keyframes fly {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(200px, 50px) rotate(10deg); }
  50% { transform: translate(400px, 0) rotate(0deg); }
  75% { transform: translate(200px, -50px) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

优化建议

使用transform-style: preserve-3d可以增强翅膀的3D效果
调整animation-timing-function使飞行路径更自然
添加box-shadow给蝴蝶增加深度感

进阶效果

要实现更逼真的蝴蝶效果，可以：

.wings {
  box-shadow: 0 0 10px rgba(255, 126, 179, 0.5);
  transition: transform 0.1s ease-out;
}

.butterfly:hover .left-wing {
  animation: flap-left 0.2s infinite alternate;
}

.butterfly:hover .right-wing {
  animation: flap-right 0.2s infinite alternate;
}

这个实现结合了翅膀扇动和整体飞行动画，通过调整关键帧和时间函数可以获得不同的飞行效果。