一闪一闪的星星特效效果 css

【一闪一闪的星星特效效果】首先让我们看一下一闪一闪的星星特效效果如下图：

文章图片

让我们先看一下布局：

? ? ? ? ? ? ?

星星一闪一闪的特效主要运用keyframes(关键帧)和animation 动画。
关键帧的创建：0%和 100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式。
animation 为复合样式，包含以下子属性：
1、animation:animation-name; (调用动画)
2、animation-duration (动画播放时间)
3、animation-timing-function (动画播放方式)，同 tranition 动画过渡；
4、animation-delay (动画开始播放时间)
5、animation-iteration-count （动画播放次数）
animation-iteration-count （动画播放次数），有两个值分别是infinite(无限)；n(具体次数)。
animation-delay (动画开始播放时间)，值以秒或毫秒计。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
CSS部分如下：

.box{background: black; width: 400px; height: 300px; margin: 20px auto; position: relative; } .one{font-size: 25px; position: absolute; animation: xing 3s linear infinite; } .a{left: 80px; top: 80px; } .b{left: 285px; top: 60px; animation-delay:2s; } .c{animation-delay:1s; left: 230px; top:231px; } .d{left: 112px; top: 202px; animation-delay:-1s; } .e{left: 162px; top: 102px; animation-delay:3.5s; } .f{left: 35px; top: 156px; animation-delay:-2s; } .g{left: 318px; top: 170px; animation-delay:1.5s; } @keyframes xing{0%{opacity: 0; } 50%{opacity: 0.5; } 100%{opacity: 1; }}