首先让我们看一下一闪一闪的星星特效效果如下图：
让我们先看一下布局：
<div class="box"><div class="one a">⭐</div><div class="one b">⭐</div><div class="one c">⭐</div><div class="one d">⭐</div><div class="one e">⭐</div><div class="one f">⭐</div><div class="one g">⭐</div></div>
星星一闪一闪的特效主要运用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部分如下：
<style>.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;}}</style>
