css动画风筝制作

CSS动画可以让我们的网页更生动，更有趣。今天，我们来学习如何用CSS制作一个简单的风筝动画。

.kite {
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  position: relative;
  margin: 50px auto;
  animation: kite 2s linear infinite;
}

.kite:before {
  content: "";
  width: 50px;
  height: 100px;
  position: absolute;
  bottom: -50px;
  left: 0;
  border-top: 5px solid #C4D6F2;
}

.kite:after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: -50px;
  left: 0;
  border-bottom: 5px solid #C4D6F2;
}

@keyframes kite {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

css动画风筝制作

我们首先定义了一个样式为“ kites”的类。我们使用CSS中的transform旋转属性将其旋转45度。接下来，我们创建伪元素:before和:after，为风筝增加上下两侧的线。我们在:before中添加的线与我们在:after中添加的线正好相反，这样我们的风筝就看起来更逼真了。

最后，我们定义了一个keyframes动画来模拟风筝的飘动。我们使用transform属性和rotate函数来制定动画，起始位置是拐角位置（-45度），中间是底部位置（-135度），最后返回拐角位置。我们在样式类“ kites”中将动画应用到了风筝上，设定时间为2秒，并无限循环播放。

有了这个简单的风筝动画，我们可以以此为基础，在其中添加更多元素来制作出更为绚丽多彩的CSS动画。想象力和创意是无穷的！

css动画风筝制作

相关文章