css怎么做星星动画

在网页设计中，CSS动画是非常重要的一部分，而星星动画则是一个让网页看起来更加有趣的细节。但是，怎么做星星动画呢？下面就让我来为大家详细介绍一下吧。

.star {
      background-color: transparent;
      height: 0;
      width: 0;
      margin: 0 auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      border-right: 20px solid transparent;
      border-bottom: 30px solid #f0c419;
      border-left: 20px solid transparent;
      -webkit-transform: rotate(35deg);
      transform: rotate(35deg);
}
.star:before {
      border-bottom: 20px solid #f0c419;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -16px;
      left: -15px;
      display: block;
      content: '';
      -webkit-transform: rotate(-35deg);
      transform: rotate(-35deg);
}
.star:after {
      position: absolute;
      display: block;
      color: #f0c419;
      top: 3px;
      left: -25px;
      content: '';
      transform: rotate(-70deg);
      width: 0;
      height: 0;
}

以上代码就是做星星动画的CSS代码，其中用到了几个关键的属性来设置星星的大小、颜色、角度等。如果想让星星动起来，则可以使用CSS3动画属性来实现。

@keyframes twinkling {
  0% {
     opacity: 0;
}
  50% {
     opacity: 1;
}
  100% {
     opacity: 0;
}
}
.star {
      animation: twinkling 2s infinite;
}
    

以上代码就是使用CSS3的动画属性，让星星动起来的代码。关键点就是：1、定义一个动画（twinkling）；2、在.star样式中添加动画，并设置循环次数为无限。

使用CSS制作星星动画是一件非常有趣的事情，尝试一下吧，能让你的网页更加的生动有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！