首先讓我們看一下一閃一閃的星星特效效果如下圖：
讓我們先看一下布局：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258204.html
標籤：其他
上一篇：JavaScript字串常用方法