css3实现一个闪电效果

最近找到了一个css3做的天气图标，里面有个雷阵雨的图标，于是就研究了下上面的闪电动画是怎么实现的。
先来看下最终效果图：

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

一、利用border画出三角形

border，是设置边框的，一般我们都只会设置1px，画一个细细的边框。下面我们看下设置粗一点的边框会是什么样的。

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

为了看出每条边框的分布，我们将上右下左四条边框单独设置，颜色也设置成不一样的。显示效果为下图左侧的样子：

然后，我们将上下的边框宽度修改下，就可以看到上图右侧的效果了。
接着，我们将上边框和左边框的颜色改成透明的：

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

这时，三角形就出现了，显示效果如下：

二、利用伪元素before和after画两个三角形

:before 伪元素在元素之前添加内容。
:after 伪元素在元素之后添加内容。
简单例子如下：

<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一定要设置。显示如下：

三、使用transform:skewX将图案旋转

transform:skewX(angle)：定义沿着X轴的2D倾斜转换。
在.bolt中加入transform:skewX(-10deg)

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

也可以顺便将颜色统一改成yellow，一个闪电图案就出来了，显示如下：

四、使用nth-child(n)设置小闪电属性

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。（这里我们配合class选择器使用）

我们要画一个小闪电在旁边的话，只需要多加个div就可以了

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

但是，这时候，两个闪电属性完全一样，是重叠在一起的，我们又需要给第二个闪电设置单独的属性。我们可以给它设置id，或加个class，也可以用nth-child(n)选择器来设置，只需要修改css，不用修改html。

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

注：由于我们上面用的单位是em，所以这里就可以使用font-size来直接修改div的大小。

因为，nth-child(n)是针对其父元素进行查找的，为了方便查找和后续的维护工作，我们在bolt上加一级div，将它的父元素由body改成这个div。

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

然后，我们来看下效果：

到这里，我们就把一大一小两个闪电画好了，下面再添加个css动画，让闪电动起来。

五、用animation添加css动画

添加动画分两步：
1、设置动画的属性变化
2、为元素加上动画
我们先来设置闪电的动画属性变化。
变化是这样的：让闪电快速亮起两次，然后第二次的时候慢慢消失

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

上面动画属性里的百分比指的是时间到达百分多少时，使用对应的属性。
然后，我们给bolt这个元素加上动画

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

到此，完整的闪电效果就大功告成了。

这里要说下的是，因为before、after这两个伪元素上，我们设置的是边框border的颜色，所以bolt元素上动画改变颜色color是不会生效的，除非border的颜色值使用currentColor，或者动画放在伪元素上，且动画改变的属性是border。

还有一点就是，如果你要兼容老版本的多浏览器，你就需要在动画属性和设置动画的前面加上各种前缀：
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源码