logo添加闪光效果css

ZJ
ZJ
2021-01-26 / 0 评论 / 205 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年09月21日,已超过793天没有更新,若内容或图片失效,请留言反馈。
代码如下:
#引用#
<div class = "logo" >内容</div> 
CSS代码:
/**logo闪光效果CSS**/
.logo:before {
 content: "";
 position: absolute;
 width: 140px;
 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;
 animation: blink 1s ease-in 1s infinite;
}
 
@-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;}
}
本文共 14 个字数,平均阅读时长 ≈ 1分钟
0

评论 (0)

取消