没有所谓的捷径
一切都是时间最平凡的累积

CSS样式实现Logo扫光特效

本文最后更新:2019年8月6日,已超过1697天未更新,如果文章内容失效,请留言反馈本站。

LOGO代码:

<div class="logo_new">
    <h1 class="logo"><a href="https://blog.mydns.vip" title="豫章小站-一个记录分享IT技术经验的小站"><
img src="https://blog.mydns.vip/wp-content/uploads/2018/12/2018122513410391.png">豫章小站</a></h1>	
</div>

样式代码:

.logo_new{
  position: relative;
  overflow: hidden;
  max-height: 50px;
  float:left; /*本站logo居左,所以添加此项样式*/
}
.logo_new:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
     /*transform:rotate(-45deg)旋转45度*/
   	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: blink 1.3s ease-in 1s infinite;
	-o-animation: blink 1.3s ease-in 1s infinite;
	animation: blink 1.3s ease-in 1s infinite;
}
 /*keyframe属性浏览器兼容性*/
@-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;}
}

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的 logo 的大小和布局进行调整即可。具体效果查看本站 logo的before效果。

keyframes属性说明:

使用@keyframes规则,你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

» 站长码字辛苦,有用点个赞吧,也可以打个
» 若转载请保留本文转自:豫章小站 » 《CSS样式实现Logo扫光特效》
» 本文链接地址:https://blog.mydns.vip/928.html
» 如果喜欢可以: 点此订阅本站 有需要帮助,可以联系小站
赞(0) 打赏 【豫章小站原创文章】
声明:本站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,若涉及侵权请及时告知,将会在第一时间删除,联系邮箱:contact@mydns.vip。文章观点不代表本站立场。本站原创内容未经允许不得转载,或转载时需注明出处:豫章小站 » CSS样式实现Logo扫光特效
分享到: 更多 (0)

评论 抢沙发


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

智慧源于勤奋,伟大出自平凡

没有所谓的捷径,一切都是时间最平凡的累积,今天所做的努力都是在为明天积蓄力量

联系我们赞助我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏