CSS3实现动画相册

See the Pen ainmated image hover effects by haiqing wang (@whqet) onCodePen.

1.效果解析

CSS3实现的动画相册，很棒的鼠标hover效果，效果如下图所示

2.难点分析

难点1，圆形遮罩

难点2，:after实现提示文本

难点3，css3实现动画

3.实现步骤

a.html架构

<ul class="nav">
	<li><a href="#" title="Swing"><img src="imgs/1.jpg" alt="" /></a></li>
	<li><a href="#" title="Dive"><img src="imgs/2.jpg" alt="" /></a></li>
	<li><a href="#" title="Destroy"><img src="imgs/3.jpg" alt="" /></a></li>
	<li><a href="#" title="Ride"><img src="imgs/4.jpg" alt="" /></a></li>
	<li><a href="#" title="Kick"><img src="imgs/5.jpg" alt="" /></a></li>
	<li><a href="#" title="About"><img src="imgs/6.jpg" alt="" /></a></li>
	<li><a href="#" title="Why"><img src="imgs/7.jpg" alt="" /></a></li>
	<li><a href="#" title="Weess"><img src="imgs/8.jpg" alt="" /></a></li>
</ul>

使用无序列表来布局图像，图像的提示文本使用:after读取a的title属性。

b.整体设置

*{
	padding: 0;
	margin: 0;
	border: none;
}
body{
	background-color: #333;
}
.nav{
	width: 980px;
	margin: 100px auto;
	list-style: none;
}

c.li实现圆角

.nav li{
	float: left;
	width: 200px;
	height: 200px;
	overflow:hidden;
	border-radius: 50%;
	border:6px solid #fff;
	box-shadow: 2px 2px 0 0 rgba(0,0,0,.5);
	margin: 12px;
	position: relative;
	transition:all .5s ease;
}
.nav li img{
	position: absolute;
	left: 0;
	top: 0;
	transition:all .5s ease;
}

d. :after实现提示文本

.nav li a{
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}
.nav li a:after{
	content: attr(title);
	position: absolute;
	bottom: -20px;
	left: 80px;
	transition:all .5s ease;
}

e. 动画效果

.nav li:hover{
	border:6px solid #333;
	box-shadow: 0px 0px 2px 0 rgba(0,0,0,.8);
}
.nav li:hover img{
	left: -80px;
	top: -80px;
}
.nav li:hover a:after{
	bottom: 20px;
}

完工！

前端开发whqet制作，火狐浏览器适用,其他浏览器兼容请高手指点。

4.兼容修正

之前webkit浏览的兼容问题源于图像和提示文本设置了绝对定位，脱离了标准流。

修正如下。

*{
	padding: 0;
	margin: 0;
	border: none;
	-webkit-backface-visibility: hidden;
}
body{
	background-color: #333;
}
.nav{
	width: 980px;
	margin: 100px auto;
	list-style: none;
	position: relative;
	z-index: 1;
}
.nav li{
	height: 200px;
	width: 200px;
	margin: 25px;
	float: left;
	overflow: hidden;
	border-radius: 50%;
	border:6px solid #fff;
	box-shadow: 2px 2px 0 0 rgba(0,0,0,.5);
	margin: 12px;
	transition:all 1s ease;
}
.nav li img{
	margin: -70px 0px 0px 0px;   /*去除绝对定位，改为margin的方式*/
	transition:all 1s ease;
}
.nav li a{
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}
.nav li a:before{
	content: attr(title);       
	position: relative;        /*改绝对定位为相对定位*/
	left: 80px;
	top: 200px;
	transition:all 1s ease;
}
.nav li:hover{
	border:6px solid #333;
	box-shadow: 0px 0px 2px 0 rgba(0,0,0,.8);
}
.nav li:hover img{
	margin-left: -150px;
	margin-top: -150px;
	cursor: pointer;
}
.nav li:hover a:before{
	top: 160px;
}

OK！