闲逛伴读听书网站，它的logo文字的闪亮效果给一种很酷炫的感觉。
如下图。
伴读听书网站的logo
挺有意思的，仿照它给自己的blog网站也加上了这个效果，如下图：
星光灿烂的logo
怎么实现的呢？
原理挺简单的，就是让一个45度的白色半透明矩形区域划过logo。
假设我们的log都放在一个
里面，假设DIV有一个class选择器，我们称之为logoDiv，那么先添加一个Style：
.logoDiv:before{
content: "";
position: absolute;
left: -665px;
top: -460px;
width: 220px;
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: showLights 3s ease-in 1s infinite;
-o-animation: showLights 3s ease-in 1s infinite;
animation: showLights 3s ease-in 1s infinite;
z-index: 999;
}
主要到上面的style中使用了showLights，再加上showLights的定义：
@-webkit-keyframes showLights {
0% {
left: 500px;
top: 0;
}
to {
left: 1000px;
top: 0;
}
}
@-o-keyframes showLights {
0% {
left: 500px;
top: 0;
}
to {
left: 1000px;
top: 0;
}
}
@-moz-keyframes showLights {
0% {
left: 500px;
top: 0;
}
to {
left: 1000px;
top: 0;
}
}
@keyframes showLights {
0% {
left: 500px;
top: 0;
}
to {
left: 1000px;
top: 0;
}
}
最后一步，为了让半透明的白色背景不要越过logoDiv，给它加一个overflow的属性。
.logoDiv{
position: relative;
overflow: hidden;
}
这样就达到效果了。
PS：网站的logo动画使用 Camtasia Studio 截屏转换而成。
相关文章：
请你留言