王桂明是个不怎么懂源码,喜欢瞎折腾的那种人,今天看到知更鸟博客和张戈博客的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上加上扫光效果

我修改的代码如下:

/**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/feed
已经有2个回复
Comment (2)
Trackbacks (0)
  1. 萧云  ( 2016.03.11 18:18 ) : #-5

    我也是看到张戈博客的这个效果的,从网上搜索实现这个效果的方法,进到了你的博客,你的博客很棒哦!

    Reply
    • 王桂明  ( 2016.03.11 20:41 ) :

      @萧云: 谢谢,自己业余喜欢折腾一下博客,欢迎常来。

      Reply
  1. 还没有Trackbacks