css3做闪电效果 |css图片居中不变形

.lightning {
position: relative;
width: 10px;
height: 100px;
background-color: yellow;
}
.lightning::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: inherit;
box-shadow: 0 0 5px white;
animation: lightning 1s ease-in-out infinite;
}
@keyframes lightning {
0% {
transform: scaleY(0.5);
opacity: 1;
}
50% {
transform: scaleY(0.1);
opacity: 0.5;
}
100% {
transform: scaleY(0.5);
opacity: 1;
}
}

以上就是基本实现闪电效果的CSS3代码了，下面让大家一起分析一下这段代码：

首先大家使用position属性设置元素的定位方式，设置为relative，相对定位。接下来设置元素的宽度和高度，这里偶设置的宽度为10px，高度为100px。

然后设置元素的背景颜色为黄色，这里根据自己喜好可以设置别的颜色。

接下来使用伪元素（::before）来设置闪电效果，使用了before伪元素是因为大家需要为闪电效果创建一个额外的元素来实现。

在before伪元素中，大家需要设置它的position属性为absolute，即绝对定位，top和left属性为0，width属性为100%，height属性继承父元素的高度，即设置为inherit，这样大家就可以将它放到整个元素的最前面。

然后使用box-shadow属性来定义闪电的颜色和边框，这里偶设置了白色和5px的宽度。

最后，大家为闪电效果设置一个动画，即通过设置animation属性，使用keyframes来实现。在keyframes中大家定义了三个关键帧，分别是0%、50%和100%。在这三个关键帧中，大家设置了闪电的缩放(scaleY)，以及透明度(opacity)，从而实现闪电效果的完成。

最后欢迎大家尝试这段代码，实现自己的闪电效果，并体验CSS3带给大家的丰富多彩的网页设计效果。