css图片闪光效果实现代码及详细解读

昨天晚上突发奇想想给博客首页赞助光荣榜的钻石图标加个效果，我不想它在那静静地呆着，我想让它动起来引起访客的注意从而达到我设立赞助光荣榜的目的，我第一想到的动效就是闪光效果，毕竟钻石吗！

因为从来没写过这个效果，开始在网上找代码，但是基本上都是互相抄，比如https://www.cnblogs.com/vali/p/5658643.html，作者把代码搬过来效果是实现了但是有bug，比如动画执行时出现滚动条，而且该文章的代码加了权限，如果在本地测试会出现异常，具体怎么个异常大家可以用Dreamweaver在其代码基础上修改测试一下，既然把代码开源出来又为何要这样？作为一个代码网站连个代码高亮效果都没有，真是无力吐槽。

所以：与其看别人的代码理解其原理还不如自己想个原理然后用代码去实现。

本文不会直接上代码，但是不会的人跟着我的文章可以学会这个效果。

我的需求是：实现闪光效果，不是触发执行，连续执行；我的实现想法是：利用伪元素插入元素，利用linear-gradient赋予元素透明渐变效果，用animation定义动画对象，用@keyframes控制动画执行，具体实现流程如下：

html代码是

1. <div class="img"><img src="images/tx16.jpg"></div> 

给div写样式

1. .img { 
2.     width: 300px; 
3.     height: 300px; 
4.     margin: auto; 
5.     position: relative;/*用于伪元素的定位*/ 
6. } 

插入伪元素

1. .img:before { 
2.     content: ""; 
3. } 

刚开始我把伪元素设置的跟div一样大小，渐变方向是to bottom right，看起来还行，只是闪光部分略粗，但是执行起来闪光效果出现畸形，所以还是老老实实规定伪元素的大小吧

1. .img:before { 
2.     content: ""; 
3.     width: 600px; 
4.     height: 100px; 
5.     position: absolute; 
6.     left: 0; 
7.     top: 0; 
8. } 

把伪元素的宽设置为600px是因为把伪元素旋转135度从左上角往右下角运动时会经过div的对角线，600px只是大概估了个值，我没按勾股定理算对角线的精确长度，超出的隐藏就行了。position: absolute;规定伪元素的初始位置，以防干扰其它元素。

1. .img:before { 
2.     content: ""; 
3.     width: 600px; 
4.     height: 100px; 
5.     position: absolute; 
6.     left: 0; 
7.     top: 0; 
8.     transform: rotate(135deg); 
9.     background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); 
10.     animation: shanguang 2s infinite; 
11. } 

当把伪元素旋转135度时渐变方向就应该是从上到下，linear-gradient中的to bottom是标准写法，其兼容写法必须在其上方（完整代码见文末），里面的三个rgba()代表渐变色，animation定义动画对象，执行一次用时两秒且连续执行。

但是让闪光效果一直闪就不太好了，闪光消失后应该停顿一会再再次闪，下面这样写可以实现：

1. @keyframes shanguang { 
2.  0% { 
3.  left: -300px; 
4.  top: 0; 
5. } 
6.  25% { 
7.  left: 300px; 
8.  top: 300px; 
9. } 
10.  100% { 
11.  left: 300px; 
12.  top: 300px; 
13. } 
14. } 

0%到25%动画从左上角到右下角就执行完了，25%到100%就让它停顿就可以。效果如下：

完整的样式代码如下：

1. @charset "utf-8"; 
2. /* CSS Document */ 
3. * { 
4.     margin: 0; 
5.     padding: 0; 
6. } 
7. .img { 
8.     width: 300px; 
9.     height: 300px; 
10.     margin: auto; 
11.     position: relative; 
12. } 
13. .img:before { 
14.     content: ""; 
15.     width: 600px; 
16.     height: 100px; 
17.     position: absolute; 
18.     left: 0; 
19.     top: 0; 
20.     transform: rotate(135deg); 
21.     -moz-transform: rotate(135deg); 
22.     -ms-transform: rotate(135deg); 
23.     -o-transform: rotate(135deg); 
24.     -webkit-transform: rotate(135deg); 
25.     background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); 
26.     background: -o-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); 
27.     background: -moz-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); 
28.     background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); 
29.     animation: shanguang 2s infinite; 
30.     -webkit-animation: shanguang 2s infinite; 
31. } 
32. @keyframes shanguang { 
33.  0% { 
34.  left: -300px; 
35.  top: 0; 
36. } 
37.  25% { 
38.  left: 300px; 
39.  top: 300px; 
40. } 
41.  100% { 
42.  left: 300px; 
43.  top: 300px; 
44. } 
45. } 
46. @-webkit-keyframes shanguang { 
47.  0% { 
48.  left: -300px; 
49.  top: 0; 
50. } 
51.  25% { 
52.  left: 300px; 
53.  top: 300px; 
54. } 
55.  100% { 
56.  left: 300px; 
57.  top: 300px; 
58. } 
59. } 

在实际应用中大家可能还会遇到伪元素影响其它元素的情况，这个大家用overflow:hidden或z-index自行解决。你可以点这里测试代码，图片在我网站找个绝对路径的图片即可。

ps：关于linear-gradient的另一个实例应用请看下面的相关阅读。