See the Pen ainmated image hover effects by haiqing wang (@whqet) on CodePen.
1.效果解析
CSS3实现的动画相册,很棒的鼠标hover效果,效果如下图所示,参见--------demo---------
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!