一闪一闪的星星特效效果
首先让我们看一下一闪一闪的星星特效效果如下图： 让我们先看一下布局：
<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>
