寫業(yè)務(wù)代碼經(jīng)常會碰到要自己實現(xiàn)一些設(shè)計交給的小動畫，今天我們就來看下小喇叭那種類似倒過來的wifi圖標(biāo)一樣的效果：
語音播放效果
對于這個有幾種實現(xiàn)方案：
一種是直接把圖標(biāo).png文件放在下面，然后再在上面覆蓋一層跟它弧度相似的圓形div，通過css的animation去控制那個覆蓋的div從左向右移動，從而實現(xiàn)出這種效果（其實還是有區(qū)別的，用div控制移動就會出現(xiàn)一個一個逐漸出現(xiàn)且，會同時消失的場景，而不是這種波浪式的遞推）
另外一種是把這個圖標(biāo)切分成三塊，通過布局調(diào)整每個小圖標(biāo)的間距，然后通過js去控制每個小圖標(biāo)的出現(xiàn)順序以及時間，這種方法的好處就是很靈活，而且代碼編寫起來也比較直觀。
但是我們作為一個前端攻城獅不能老寫偏中后臺的邏輯代碼，總得學(xué)會用css裝飾自己吧，更何況現(xiàn)在css3的出現(xiàn)，頁面的動畫變得可以像ppt一樣舒服了。所以我介紹下最后一種方式，就是用div塊去設(shè)定border然后再給div一個border-radius:50%，做出三個圓調(diào)整好位置，然后用一個矩形的div轉(zhuǎn)變角度去蓋住這三個圓，最后通過css3的animation去控制漸進漸出，從而實現(xiàn)上圖的效果！
話不多說上代碼：
div結(jié)構(gòu)
css代碼外部div塊以及圓環(huán)通用樣式
css代碼每個小環(huán)的大小、位置以及動畫定義
漸進漸出動畫效果定義
文末附上完整代碼：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>微信語音樣式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box {
width: 120px;
height: 120px;
box-sizing: border-box;
position: relative;
margin: 50px auto;
}
.wifi-symbol {
width: 50px;
height: 50px;
box-sizing: border-box;
overflow: hidden;
transform: rotate(135deg);
}
.wifi-circle {
border: 5px solid #999999;
border-radius: 50%;
position: absolute;
}
.first {
width: 5px;
height: 5px;
background: #cccccc;
top: 45px;
left: 45px;
}
.second {
width: 25px;
height: 25px;
top: 35px;
left: 35px;
animation: fadeInOut 1s infinite 0.2s;.
}
.third {
width: 40px;
height: 40px;
top: 25px;
left: 25px;
animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
0% {
opacity: 0; /*初始狀態(tài) 透明度為0*/
}
100% {
opacity: 1; /*結(jié)尾狀態(tài) 透明度為1*/
}
}
</style>
</head>
<body>
<div class="box">
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
</div>
</div>
</body>
</html>
