最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点：
1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果
2、使用css3动画属性transform:scale(1.1) 变化图片大小
3、使用transition实现渐变动画效果
页面代码如下：
<body id="before-after">
<ul>
<li><a href="#"><img src="images/p4.jpg" width="390" alt=""></a></li>
<li><a href="#"><img src="images/p5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/p7.png" alt=""></a></li>
</ul>
</body>
css代码如下：
/* 伪元素before-after */
#before-after ul {
clear:both;
overflow:hidden;
margin:20px 0 0 0
}
#before-after li {
float:left;
margin:0 20px 0 0
}
#before-after li a {
height: 365px;
}
#before-after li a, #before-after li img {
display: block;
height: 220px;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
width: 390px;
}
#before-after li a:before, #before-after li a:after {
content: "";
height: 220px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.4s ease 0s;
visibility: hidden;
width: 390px;
}
#before-after li a:before {
background:#7a7fd2;
z-index:1
}
#before-after li a:hover:before {
opacity: 0.8;
visibility: visible;
}
#before-after li:hover a:after {
z-index:2;
background:url(images/play.png) center center no-repeat;
}
#before-after li a:hover:after {
opacity: 1;
visibility: visible;
}
#before-after li:hover img {
transform:scale(1.1)
}
实例下载地址：http://pan.baidu.com/s/1dDH52Hb
1109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
