首先看旋转特效:http://***/demo/201512/2015-12-09-css3-image-hover-animate/index.html
这是一款纯CSS3实现的当鼠标滑过图片时文字旋转动画特效,效果图如下:
实现代码:
<
div
class
=
"main"
>
<
div
class
=
"view"
>
<
img
src
=
"images/modeo02.jpg"
alt
=
""
>
<
div
class
=
"hover"
>
<
h3
>魔力唇彩</
h3
>
<
p
>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</
p
>
</
div
>
</
div
>
<
div
class
=
"view"
>
<
img
src
=
"images/modeo03.jpg"
alt
=
""
>
<
div
class
=
"hover"
>
<
h3
>魔力唇彩</
h3
>
<
p
>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</
p
>
</
div
>
</
div
>
<
div
class
=
"view"
>
<
img
src
=
"images/modeo04.jpg"
alt
=
""
>
<
div
class
=
"hover"
>
<
h3
>魔力唇彩</
h3
>
<
p
>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</
p
>
</
div
>
</
div
>
<
div
class
=
"view"
>
<
img
src
=
"images/modeo05.jpg"
alt
=
""
>
<
div
class
=
"hover"
>
<
h3
>魔力唇彩</
h3
>
<
p
>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</
p
>
</
div
>
</
div
>
<
div
class
=
"view"
>
<
img
src
=
"images/modeo06.jpg"
alt
=
""
>
<
div
class
=
"hover"
>
<
h3
>魔力唇彩</
h3
>
<
p
>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</
p
>
</
div
>
</
div
>
<
div
class
=
"view"
>
<
img
src
=
"images/modeo07.jpg"
alt
=
""
>
<
div
class
=
"hover"
>
<
h3
>魔力唇彩</
h3
>
<
p
>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</
p
>
</
div
>
</
div
>
</
div
>