[分享]css3实现飞翔小鸟

CSS3实现飞翔小鸟

/* 创建鸟的容器 */
.bird{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 100px;
  margin-left: -75px;
  margin-top: -50px;
  background-color: #32CD32;
  border-radius: 50% 50% 30% 30%;
}

/* 鸟的眼睛 */
.bird .eye{
  position: relative;
  left: 100px;
  top: 30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
}

/* 鸟的瞳孔 */
.bird .eye:before{
  content: '';
  position: absolute;
  left: 8px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000;
}

/* 鸟的嘴巴 */
.bird .mouth{
  position: relative;
  left: 20px;
  top: 50px;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #fff;
}

/* 鸟翅膀 */
.bird .wing{
  position: absolute;
  left: -90px;
  top: 15px;
  width: 80px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  transform: rotate(-45deg);
  animation: wing 1s ease-in-out infinite alternate;
}

/* 鸟翅膀动画 */
@keyframes wing {
  0%{
    transform: rotate(-45deg) translateX(0);
  }
  100%{
    transform: rotate(-45deg) translateX(20px);
  }
} 

以上代码实现了一个简单的小鸟，接下来我们要让小鸟飞翔起来。

/* 小鸟在空中飞翔 */
.bird-fly{
  animation: bird-fly 2s ease-in;
  animation-fill-mode: forwards;
}

/* 飞翔动画 */
@keyframes bird-fly {
  0%{
    transform: translateY(0) rotate(-45deg);
  }
  50%{
    transform: translateY(-200px) rotate(-45deg);
  }
  100%{
    transform: translateY(0) rotate(-45deg);
  }
} 

通过给小鸟添加一个“bird-fly”类，触发“bird-fly”动画，让小鸟在空中飞翔。

最终实现效果请看下面的示例：

飞起来