网站logo添加闪光效果

我们浏览网站时经常看到一些网站的LOGO带有扫光效果，如下图

该效果可由纯CSS实现，使用时可能需要根据你的网站自行修改参数

修改成你网站logo后方所在标签的类名，即代码中的两处navbar-brand，可在Edge检查中查看

之后把代码放到需要的地方即可

/**logo闪光效果**/
.navbar-brand {
 position: relative;
 overflow: hidden;
 max-height: 60px;
}
/**伪元素法生成长条**/
.navbar-brand::before {
 content: "";
 position: absolute;
 width: 150px;
 height: 10px;
 background-color: rgba(255, 255, 255, 0.5);
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: blink 1s ease-in 1s infinite alternate;
 /**动画名，持续，加速，循环，逆播放**/
 animation: blink 1s ease-in 1s infinite alternate;
}
 
@-webkit-keyframes blink {
 from {left: 10px;top: 0;}
 to {left: 320px;top: 0;}
}
@-o-keyframes blink {
 from {left: 10px;top: 0;}
 to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
 from {left: 10px;top: 0;}
 to {left: 320px;top: 0;}
}
@keyframes blink {
 from {left: -100px;top: 0;}
 to {left: 320px;top: 0;}
}