闲逛伴读听书网站,它的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 截屏转换而成。
相关文章:
请你留言