CSS3实现动画相册

桃扇骨 2022-02-26 04:46 278阅读 0赞

See the Pen [ ainmated image hover effects][ainmated image hover effects] by haiqing wang ([@whqet][whqet]) on[CodePen][].

1.效果解析

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

![20130505220725063][]

2.难点分析

难点1，圆形遮罩

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

难点3，css3实现动画

3.实现步骤

a.html架构

使用无序列表来布局图像，图像的提示文本使用: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！

[ainmated image hover effects]: http://codepen.io/whqet/pen/BgIxq
[whqet]: http://codepen.io/whqet
[CodePen]: http://codepen.io
[20130505220725063]: /images/20220226/d52ea57a55a345e58843c306674a1f53.png