纯css给logo上加上扫光效果

王桂明是个不怎么懂源码，喜欢瞎折腾的那种人，今天看到知更鸟博客和张戈博客的logo上面有一个动态的效果，开始以为是gif动画图片，仔细查看不是，自己也想把自己的博客搞成那样的效果 ,于是来折腾一下。

首先查看了2个博客的源码，发现这种是用CSS样式做起来，虽然自己有些不怎么懂，先把他们的CSS样式取下来上自己博客上调试，他们的样式代码如下：

.logo-site{width:220px;overflow:hidden}@media screen and (max-width:480px){.logo-site{width:140px}}.logo-site:before{content:"";position:absolute;left:-665px;top:-460px;width:200px;height:15px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;-o-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 1s ease-in 1s infinite}@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}

经过2个多小时的调试自己博客，终于修改成功，并把修改的代码放出来，每个人要根据自己的网站和背景颜色调试，效果如图：

给logo上加上扫光效果

我修改的代码如下：

/**logo扫光效果CSS**/
.hgroup:before {
    content: "";
    position: absolute;
    left: -15px;
    top: -50px;
    width: 250px;
    height: 15px;
    background-color: rgba(236,236,236,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
 
@-webkit-keyframes searchLights {
	0% {
		left: 10px;
		top: 0
	}
 
	to {
		left: 320px;
		top: 0px
	}
}
 
@-o-keyframes searchLights {
	0% {
		left: 10px;
		top: 0
	}
 
	to {
		left: 320px;
		top: 0px
	}
}
 
@-moz-keyframes searchLights {
	0% {
		left: 10px;
		top: 0
	}
 
	to {
		left: 320px;
		top: 0px
	}
}
 
@keyframes searchLights {
	0% {
		left: 10px;
		top: 0
	}
 
	to {
		left: 320px;
		top: 0px
	}
}

» 本文链接： http://www.0523jz.com/1334.html

» 订阅本站： http://www.0523jz.com/feed

» 转载请注明来源：王桂明's Blog » 《纯css给logo上加上扫光效果》

Tags: 扫光效果相关文章分享

已经有2个回复

Comment (2)

Trackbacks (0)

萧云　( 2016.03.11 18:18 ) : #-5

我也是看到张戈博客的这个效果的，从网上搜索实现这个效果的方法，进到了你的博客，你的博客很棒哦！
Reply
- 王桂明　( 2016.03.11 20:41 ) :
  
  @萧云: 谢谢，自己业余喜欢折腾一下博客，欢迎常来。
  
  Reply