闲逛伴读听书网站,它的logo文字的闪亮效果给一种很酷炫的感觉。

如下图。

伴读听书网站的logo

挺有意思的,仿照它给自己的blog网站也加上了这个效果,如下图:

星光灿烂的logo

怎么实现的呢?

原理挺简单的,就是让一个45度的白色半透明矩形区域划过logo。

假设我们的log都放在一个<DIV>里面,假设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 截屏转换而成。

相关文章: