本文特效主要是运用了css3的动画功能，当然你的浏览器要支持css3才能看的到效果。截图如下：大概效果
源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3图片特效</title>
<style>
@-webkit-keyframes x-spin{0%{top:0}23.3%{top:0}33.3%{top:-120px}56.6%{top:-120px}66.6%{top:-240px}89.9%{top:-240px}100%{top:-360px}}@-moz-keyframes x-spin{0%{top:0}23.3%{top:0}33.3%{top:-120px}56.6%{top:-120px}66.6%{top:-240px}89.9%{top:-240px}100%{top:-360px}}@keyframes x-spin{0%{top:0}23.3%{top:0}33.3%{top:-120px}56.6%{top:-120px}66.6%{top:-240px}89.9%{top:-240px}100%{top:-360px}}.demo{width:900px;position:relative;height:110px;margin:20px auto 0}.demo span{float:left;height:110px;width:148px;transition:opacity .2s linear;-webkit-transition:opacity .3s linear;position:relative}.demo span i{float:left;height:110px;width:148px;position:absolute;overflow:hidden;left:0;top:0;z-index:1;transition:all .2s linear;-webkit-transition:all .3s linear}.demo span img{height:110px;width:100%;overflow:hidden;display:block;transition:all .2s linear;-webkit-transition:all .3s linear;overflow:hidden}.demo span b.text{position:relative;left:0;top:93px;color:#fff;font-size:12px;padding:0 7px 0 5px;font-weight:400;z-index:2;background:url('http://p1.qhimg.com/d/inn/cf4e4f97/t.png') right 0;height:17px;line-height:17px;overflow:hidden;float:left;transition:all .2s linear;-webkit-transition:all .3s linear}.demo span a.mask{position:absolute;background:#fff;z-index:2;padding:0;left:0;top:0;width:148px;height:110px;opacity:0;filter:alpha(opacity = 0);transition:all .3s linear 0;-webkit-transition:all .3s linear 0}* html .demo span b.text{background:0}* html .demo span b.text em{position:absolute;right:0;top:0;height:17px;width:100px;z-index:-1;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'http://p1.qhimg.com/d/inn/cf4e4f97/t.png',sizingMethod = 'crop')}.demo span b.box{position:absolute;top:0;left:0;transition:all .3s linear 0;-webkit-transition:all .3s linear 2s;width:100%;overflow:hidden}.demo:hover span a.mask,.demo.hover span a.mask{opacity:.65;display:block}.demo:hover span:hover,.demo.hover span.hover{z-index:3}.demo:hover span:hover a.mask,.demo.hover span.hover a.mask{opacity:0;z-index:3;left:-6px;top:-5px;height:120px;width:160px}.demo:hover span:hover i,.demo.hover span.hover i{width:160px;height:120px;left:-6px;top:-5px;box-shadow:0 0 20px rgba(0,0,0,0.5)}.demo:hover span:hover b.text,.demo.hover span.hover b.text{top:98px;left:-6px}.demo:hover span:hover img,.demo.hover span.hover img{height:120px}.demo span:hover b.box,.demo span.hover b.box{transform-style:preserve-3d;animation-name:x-spin;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-direction:normal;-o-transform-style:preserve-3d;-o-animation-name:x-spin;-o-animation-duration:5s;-o-animation-iteration-count:infinite;-o-animation-timing-function:linear;-o-animation-direction:normal;-ms-transform-style:preserve-3d;-ms-animation-name:x-spin;-ms-animation-duration:5s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;-ms-animation-direction:normal;-moz-transform-style:preserve-3d;-moz-animation-name:x-spin;-moz-animation-duration:5s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-moz-animation-direction:normal;-webkit-transform-style:preserve-3d;-webkit-animation-name:x-spin;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-direction:normal}
</style>
</head>
<body>
<div style="margin-top:40px" id="demo" class="demo"> <span> <i> <b class="box"> <img src="http://p4.qhimg.com/t01caeaf46d4793920b.jpg"> <img src="http://p5.qhimg.com/t017e2d6e784b2dd301.jpg"> <img src="http://p7.qhimg.com/t01047dc634fc6e03e4.jpg"> <img src="http://p4.qhimg.com/t01caeaf46d4793920b.jpg"> </b> </i> <b class="text">校花美女<em></em></b> <a target="_self" href="#" class="mask"></a> </span> <span> <i> <b class="box"> <img src="http://p6.qhimg.com/t01af6b2e3eb42472d3.jpg"> <img src="http://p0.qhimg.com/t01514eef2a0759d784.jpg"> <img src="http://p1.qhimg.com/t01fc8103f3958e132d.jpg"> <img src="http://p6.qhimg.com/t01af6b2e3eb42472d3.jpg"> </b> </i> <b class="text">卡通壁纸<em></em></b> <a target="_self" href="#" class="mask"></a> </span> <span> <i> <b class="box"> <img src="http://p3.qhimg.com/t014f896ae88ddd3d9e.jpg"> <img src="http://p9.qhimg.com/t011908eabf3fb094de.jpg"> <img src="http://p5.qhimg.com/t012e44d7abcd527711.jpg"> <img src="http://p3.qhimg.com/t014f896ae88ddd3d9e.jpg"> </b> </i> <b class="text">美食诱惑<em></em></b> <a target="_self" href="#" class="mask"></a> </span> <span> <i> <b class="box"> <img src="http://p0.qhimg.com/t01b5aa17aa2873f44b.jpg"> <img src="http://p7.qhimg.com/t01727042c3a375c406.jpg"> <img src="http://p3.qhimg.com/t0198821356d9ebcc30.jpg"> <img src="http://p0.qhimg.com/t01b5aa17aa2873f44b.jpg"> </b> </i> <b class="text">移轴摄影<em></em></b> <a target="_self" href="#" class="mask"></a> </span> <span> <i> <b class="box"> <img src="http://p2.qhimg.com/t01aea4ae85f5680506.jpg"> <img src="http://p2.qhimg.com/t019672ed4006f3c1f3.jpg"> <img src="http://p2.qhimg.com/t01536ba2d16c26b829.jpg"> <img src="http://p2.qhimg.com/t01aea4ae85f5680506.jpg"> </b> </i> <b class="text">婚纱<em></em></b> <a target="_self" href="#" class="mask"></a> </span> <span> <i> <b class="box"> <img src="http://p6.qhimg.com/t01d81dda194def18a7.jpg"> <img src="http://p4.qhimg.com/t01047e051a0b883e76.jpg"> <img src="http://p3.qhimg.com/t01a30f37221b11b049.jpg"> <img src="http://p6.qhimg.com/t01d81dda194def18a7.jpg"> </b> </i> <b class="text">冰天雪地<em></em></b> <a target="_self" href="#" class="mask"></a> </span> </div>
</body>
</html>
好了，完
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)