网站logo添加闪光效果

共768字,阅读约3分钟

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

img

该效果可由纯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;}
}
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
墨初的头像-墨初博客

昵称

取消
昵称表情代码图片