王桂明是个不怎么懂源码,喜欢瞎折腾的那种人,今天看到知更鸟博客和张戈博客的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上加上扫光效果》
已经有2个回复
Comment (2)
Trackbacks (0)
-
还没有Trackbacks
我也是看到张戈博客的这个效果的,从网上搜索实现这个效果的方法,进到了你的博客,你的博客很棒哦!
@萧云: 谢谢,自己业余喜欢折腾一下博客,欢迎常来。