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

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

一、利用border畫出三角形

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

<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>

為了看出每條邊框的分布，我們將上右下左四條邊框單獨設(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;

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

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

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

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

顯示如下：

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

<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，一個閃電圖案就出來了，顯示如下：

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

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

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

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

但是，這時候，兩個閃電屬性完全一樣，是重疊在一起的，我們又需要給第二個閃電設(shè)置單獨的屬性。我們可以給它設(shè)置id，或加個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的大小。

因為，nth-child(n)是針對其父元素進行查找的，為了方便查找和后續(xù)的維護工作，我們在bolt上加一級div，將它的父元素由body改成這個div。

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

然后，我們來看下效果：

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

五、用animation添加css動畫

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

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

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

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

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

這里要說下的是，因為before、after這兩個偽元素上，我們設(shè)置的是邊框border的顏色，所以bolt元素上動畫改變顏色color是不會生效的，除非border的顏色值使用currentColor，或者動畫放在偽元素上，且動畫改變的屬性是border。

還有一點就是，如果你要兼容老版本的多瀏覽器，你就需要在動畫屬性和設(shè)置動畫的前面加上各種前綴：
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实现一个闪电效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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