常用CSS3特效收藏

一、鼠标放置图像旋转360度

#nav a i{
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;
}
#nav a:hover i{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}

来源:http://vc.changyou.com/ideas-web.shtml#/ideas/1

二、从上面掉下来

.tm_view_eighth .tm_mask {
-webkit-transition:all .3s ease-out .5s;
-moz-transition:all .3s ease-out .5s;
-o-transition:all .3s ease-out .5s;
-ms-transition:all .3s ease-out .5s;
transition:all .3s ease-out .5s
}
.tm_view_eighth h2 {
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .1s;
-moz-transition:all .2s ease-in-out .1s;
-o-transition:all .2s ease-in-out .1s;
-ms-transition:all .2s ease-in-out .1s;
transition:all .2s ease-in-out .1s
}
.tm_view_eighth p {
	color:#333;
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .2s;
-moz-transition:all .2s ease-in-out .2s;
-o-transition:all .2s ease-in-out .2s;
-ms-transition:all .2s ease-in-out .2s;
transition:all .2s ease-in-out .2s
}
.tm_view_eighth a.btn {
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .3s;
-moz-transition:all .2s ease-in-out .3s;
-o-transition:all .2s ease-in-out .3s;
-ms-transition:all .2s ease-in-out .3s;
transition:all .2s ease-in-out .3s
}


.tm_view_eighth:hover a.btn {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s
}

.tm_view_eighth:hover .tm_mask {
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s;
-webkit-animation:bounceY .9s linear;
-moz-animation:bounceY .9s linear;
-ms-animation:bounceY .9s linear;
animation:bounceY .9s linear
}
.tm_view_eighth:hover h2 {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
-webkit-transition-delay:.4s;
-moz-transition-delay:.4s;
-o-transition-delay:.4s;
-ms-transition-delay:.4s;
transition-delay:.4s
}
.tm_view_eighth:hover p {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
-ms-transition-delay:.2s;
transition-delay:.2s
}
.tm_view_eighth:hover a.btn {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s
}

来源:http://www.7755.me/index.html

三、短小精悍的css3动画库

http://animator.ringotc.net/

四、未完待续

版权所有©转载必须以链接形式注明作者和原始出处

《常用CSS3特效收藏》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注