最近找到了一個(gè)css3做的天氣圖標(biāo)，里面有個(gè)雷陣雨的圖標(biāo)，于是就研究了下上面的閃電動(dòng)畫是怎么實(shí)現(xiàn)的。
先來看下最終效果圖：

它主要用到是以下幾個(gè)css3屬性：
1.border
2.after和before
3.transform:skewX
4.nth-child(n)
5.animation

一、利用border畫出三角形

border，是設(shè)置邊框的，一般我們都只會(huì)設(shè)置1px，畫一個(gè)細(xì)細(xì)的邊框。下面我們看下設(shè)置粗一點(diǎn)的邊框會(huì)是什么樣的。

<style> .bolt{ position:absolute; top:50%; left:50%; border-top:1em solid red; border-right:1em solid blue; border-bottom:1em solid green; border-left:1em solid black; } </style> <div class="bolt"></div>

為了看出每條邊框的分布，我們將上右下左四條邊框單獨(dú)設(shè)置，顏色也設(shè)置成不一樣的。顯示效果為下圖左側(cè)的樣子：

然后，我們將上下的邊框?qū)挾刃薷南?#xff0c;就可以看到上圖右側(cè)的效果了。
接著，我們將上邊框和左邊框的顏色改成透明的：

border-top:2em solid transparent; border-right:1em solid blue; border-bottom:2em solid green; border-left:1em solid transparent;

這時(shí)，三角形就出現(xiàn)了，顯示效果如下：

二、利用偽元素before和after畫兩個(gè)三角形

:before 偽元素在元素之前添加內(nèi)容。
:after 偽元素在元素之后添加內(nèi)容。
簡(jiǎn)單例子如下：

<script> .demo:before{content="前面"; } .demo:after{content="后面"; } </script> <div class="demo">中間</div>

顯示如下：

上面這個(gè)就是偽元素before和after的簡(jiǎn)單使用了，但是我們這邊不用來顯示文字，而是顯示邊框。

<style> .bolt{position:absolute;top:50%;left:50%; } .bolt::before{content:"";position:absolute;margin-top:-3em;margin-left:-1.5em;border-top:2em solid transparent;border-right:1em solid blue;border-bottom:2em solid green;border-left:1em solid transparent; } .bolt::after{content:"";position:absolute;margin-left:-0.5em;border-top:2em solid red;border-right:1em solid transparent;border-bottom:2em solid transparent;border-left:1em solid black; } </style> <div class="bolt"></div>

這里注意，content和position一定要設(shè)置。顯示如下：

三、使用transform:skewX將圖案旋轉(zhuǎn)

transform:skewX(angle)：定義沿著X軸的2D傾斜轉(zhuǎn)換。
在.bolt中加入transform:skewX(-10deg)

.bolt{position:absolute;top:50%;left:50%;transform:skewX(-10deg); }

也可以順便將顏色統(tǒng)一改成yellow，一個(gè)閃電圖案就出來了，顯示如下：

四、使用nth-child(n)設(shè)置小閃電屬性

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。（這里我們配合class選擇器使用）

我們要畫一個(gè)小閃電在旁邊的話，只需要多加個(gè)div就可以了

<div class="bolt"></div> <div class="bolt"></div>

但是，這時(shí)候，兩個(gè)閃電屬性完全一樣，是重疊在一起的，我們又需要給第二個(gè)閃電設(shè)置單獨(dú)的屬性。我們可以給它設(shè)置id，或加個(gè)class，也可以用nth-child(n)選擇器來設(shè)置，只需要修改css，不用修改html。

.bolt:nth-child(2){margin-top:5em;margin-left:2em;font-size:0.5em; }

注：由于我們上面用的單位是em，所以這里就可以使用font-size來直接修改div的大小。

因?yàn)?#xff0c;nth-child(n)是針對(duì)其父元素進(jìn)行查找的，為了方便查找和后續(xù)的維護(hù)工作，我們?cè)赽olt上加一級(jí)div，將它的父元素由body改成這個(gè)div。

<div id="lightning"> <div class="bolt"></div> <div class="bolt"></div> </div>

然后，我們來看下效果：

到這里，我們就把一大一小兩個(gè)閃電畫好了，下面再添加個(gè)css動(dòng)畫，讓閃電動(dòng)起來。

五、用animation添加css動(dòng)畫

添加動(dòng)畫分兩步：
1、設(shè)置動(dòng)畫的屬性變化
2、為元素加上動(dòng)畫
我們先來設(shè)置閃電的動(dòng)畫屬性變化。
變化是這樣的：讓閃電快速亮起兩次，然后第二次的時(shí)候慢慢消失

@keyframes lightning-anim {0%{opacity:0;}5% {opacity:1;}10% {opacity:0;}15% {opacity:1;}100% {opacity:0;} }

上面動(dòng)畫屬性里的百分比指的是時(shí)間到達(dá)百分多少時(shí)，使用對(duì)應(yīng)的屬性。
然后，我們給bolt這個(gè)元素加上動(dòng)畫

.bolt{position:absolute;top:50%;left:50%;transform:skewX(-10deg);animation: lightning-anim 2s linear infinite; }

到此，完整的閃電效果就大功告成了。

這里要說下的是，因?yàn)閎efore、after這兩個(gè)偽元素上，我們?cè)O(shè)置的是邊框border的顏色，所以bolt元素上動(dòng)畫改變顏色color是不會(huì)生效的，除非border的顏色值使用currentColor，或者動(dòng)畫放在偽元素上，且動(dòng)畫改變的屬性是border。

還有一點(diǎn)就是，如果你要兼容老版本的多瀏覽器，你就需要在動(dòng)畫屬性和設(shè)置動(dòng)畫的前面加上各種前綴：
1、-moz-代表firefox瀏覽器私有屬性
2、-ms-代表ie瀏覽器私有屬性
3、-webkit-代表safari、chrome私有屬性
4、-o-代表Opera
如：

@-webkit-keyframes lightning-anim{} -webkit-animation:lightning-anim 2s linear infinite;

具體代碼可以下載我上傳的資源。demo源碼

總結(jié)

以上是生活随笔為你收集整理的css3实现一个闪电效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。