本站首页 返回顶部 关于博主

利用CSS3的animation实现闪亮的效果

PDF版

闲逛伴读听书网站,它的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 截屏转换而成。

 

相关文章:




请你留言