建站教程:给网站logo增加闪光效果

建站教程:给网站logo增加闪光效果

建站教程:给网站logo增加闪光效果

为网站log增加闪光动画效果已经不算是新鲜东西了。不过现在还是有很多网站使用此效果,让logo显得比较有美观。今天分享一篇如何用纯代码的方式为网站logo添加闪光动画效果,适用于所有网站。我们浏览网站时经常会看到一些网站的logo带有扫光效果,像光线扫过一样,看上去比较美观。有的站长可能用软件做一个GIF格式的logo,可以达到类似的效果,但是今天发现可以用纯代码实现网站logo扫光的效果,还是很不错的。在logo的CSS样式表中,添加以下CSS代码:

/**logo闪光效果CSS**/
.logo{
position: relative;
overflow: hidden;
float:left;
max-height: 50px;
}
.logo:before {
content: "";
position: absolute;
width: 150px;
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;}
} 
分享到 :
相关推荐

发表评论

登录... 后才能评论