css鼠标悬停动画

.subslogan > p{
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
color: rgba(255,255,255,0.8);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
}

.subslogan > p:hover{
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}

上面是一小段css的代码，可用于一张图片上鼠标指向图片时出现文字，他先是将文字隐藏，当指向图片时会有一个0.05S的延时出现，因此造成了一种指向图片时文字从下向上划出的感觉，这种效果用Javascript也能够做出来，不过这也反应出CSS3功能的强大之处。

下面附上效果的链接地址，这个网站同样有源码，还是不错的额。

http://www.html5tricks.com/css3-image-mouse-hover.html

文章目录