当前位置：首页 > CSS

css制作蝴蝶飞

2026-01-28 15:34:49CSS

使用CSS动画制作蝴蝶飞效果

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

HTML结构

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

CSS样式

.butterfly {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 60px;
}

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

.left-wing, .right-wing {
  position: absolute;
  width: 40px;
  height: 50px;
  background-color: #f06;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

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

.right-wing {
  right: 5px;
  transform-origin: left center;
  animation: flap 0.5s ease-in-out infinite alternate-reverse;
}

@keyframes flap {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(70deg);
  }
}

.butterfly {
  animation: fly 15s linear infinite;
}

@keyframes fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(200%, -100%) rotate(90deg);
  }
  50% {
    transform: translate(400%, 0%) rotate(180deg);
  }
  75% {
    transform: translate(200%, 100%) rotate(270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

实现原理说明

蝴蝶身体由三个部分组成：身体(细长椭圆)和两个翅膀(扇形)。翅膀使用border-radius创建有机形状。

翅膀动画通过transform: rotateY()实现3D翻转效果，transform-origin设置旋转中心点为翅膀根部。左右翅膀使用相反的动画方向(alternate和alternate-reverse)实现交替扇动。

蝴蝶整体飞行路径通过translate()改变位置，配合rotate()实现转向效果，形成环形飞行轨迹。infinite使动画循环播放。

进阶优化建议

增加渐变颜色使翅膀更生动：

.left-wing, .right-wing {
  background: linear-gradient(135deg, #f06, #f9a);
}

添加阴影增强立体感：

.body {
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.wing {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

调整飞行路径为更自然的曲线：

css制作蝴蝶飞

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