html 鼠标图标做成动画效果,CSS3鼠标悬停图片动画 多种文字动画效果

本文作者html5tricks，转载请注明出处

这是一款基于CSS3的图片鼠标悬停动画，这款CSS3应用的特点是当鼠标移动至图片上方时，在图片上将会出现自定义的动画，可以是文字动画、图标动画等。另外，这款CSS3鼠标悬停图片动画的形式非常丰富，基本可以满足你的需求。

下面我们一起来看看实现这款CSS3鼠标悬停动画的过程和代码，代码主要由HTML和CSS组成。

HTML代码：

Nice Lily

Lily likes to play with crayons and pencils

View more

Nice Lily

Lily likes to play with crayons and pencils

View more

这里我们一两张图片为例，下面是渲染的CSS代码

CSS代码

figure.effect-lily img {

max-width: none;

width: -webkit-calc(100% + 50px);

width: calc(100% + 50px);

opacity: 0.7;

-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

transition: opacity 0.35s, transform 0.35s;

-webkit-transform: translate3d(-40px,0, 0);

transform: translate3d(-40px,0,0);

}

figure.effect-lily figcaption {

text-align: left;

}

figure.effect-lily figcaption > div {

position: absolute;

bottom: 0;

left: 0;

padding: 2em;

width: 100%;

height: 50%;

}

figure.effect-lily h2,

figure.effect-lily p {

-webkit-transform: translate3d(0,40px,0);

transform: translate3d(0,40px,0);

}

figure.effect-lily h2 {

-webkit-transition: -webkit-transform 0.35s;

transition: transform 0.35s;

}

figure.effect-lily p {

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;

}

figure.effect-lily:hover img,

figure.effect-lily:hover p {

opacity: 1;

}

figure.effect-lily:hover img,

figure.effect-lily:hover h2,

figure.effect-lily:hover p {

-webkit-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}

figure.effect-lily:hover p {

-webkit-transition-delay: 0.05s;

transition-delay: 0.05s;

-webkit-transition-duration: 0.35s;

transition-duration: 0.35s;

}

其他的效果大家可以下载源码来看看，效果很不错。