純CSS實(shí)現(xiàn)跑馬燈效果，CSS動(dòng)畫知識是該補(bǔ)一補(bǔ)了
作者：林三心不學(xué)挖掘機(jī)
最近看一個(gè)網(wǎng)站的時(shí)候，發(fā)現(xiàn)一個(gè)效果類似于廣告燈的感覺，挺不錯(cuò)的，于是就想用純CSS來實(shí)現(xiàn)這個(gè)效果，順便提升一下自己的CSS動(dòng)畫技能
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。
最近看一個(gè)網(wǎng)站的時(shí)候，發(fā)現(xiàn)一個(gè)效果類似于廣告燈的感覺，挺不錯(cuò)的，于是就想用純CSS來實(shí)現(xiàn)這個(gè)效果，順便提升一下自己的CSS動(dòng)畫技能。
圖片
分析
我們先分析怎么做的，這個(gè)效果分成兩個(gè)部分：
- 上層：真正動(dòng)畫的層級
- 下層：充當(dāng)一個(gè)底色
然后他們通過絕對定位疊在一起。
圖片
可以看到，動(dòng)畫沒開始前，頁面是這樣的，可以理解這是一個(gè)底色下層，鋪在下面，讓每一個(gè)圓都有一個(gè)輪廓。
圖片
動(dòng)畫上層開始的時(shí)候，下層是不變的，一直保持底色。
圖片
開始寫頁面
頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #232b36;
}
.container {
position: relative;
}
.grid {
display: flex;
flex-wrap: wrap;
width: 240px;
}
.high {
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.low {
opacity: .1;
position: absolute;
z-index: 0;
top: 0;
left: 0;
}
span {
width: 4px;
height: 4px;
margin: 10px;
border-radius: 50%;
background-color: #fff;
opacity: .6;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="grid high">
30個(gè)span。。
</div>
<div class="grid low">
30個(gè)span。。
</div>
</div>
</body>
</html>現(xiàn)在能看到已經(jīng)把兩層疊在了一起。
圖片
動(dòng)畫
接下來讓 high 這一層開始動(dòng)畫
.high span {
/* 動(dòng)畫名 */
animation-name: myAnimation;
/* 動(dòng)畫時(shí)長 */
animation-duration: 1s;
/* 無限循環(huán) */
animation-iteration-count: infinite;
background-color: #AEF731;
}
@keyframes myAnimation {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}現(xiàn)在就有動(dòng)畫效果了
圖片
但是我們可以看到剛剛我們想要的效果，他是中間先變，四周再變的
圖片
所以我們需要使用到動(dòng)畫延遲，也就是
animation-delay這個(gè)樣式屬性
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
.delay-4 {
animation-delay: 0.4s;
}<div class="grid high">
<span class="delay-4"></span>
<span class="delay-3"></span>
<span class="delay-2"></span>
<span class="delay-1"></span>
<span></span>
<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>
<span class="delay-4"></span>
<span class="delay-3"></span>
<span class="delay-2"></span>
<span class="delay-1"></span>
<span></span>
<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>
<span class="delay-4"></span>
<span class="delay-2"></span>
<span class="delay-2"></span>
<span class="delay-1"></span>
<span></span>
<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>
</div>這就達(dá)到了我們想要的效果啦~~~
圖片
代碼總覽
圖片
責(zé)任編輯：武曉燕
來源：
前端之神
