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

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

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

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

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

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

html代码是