CSS3实现动画相册-蒲公英云

CSS3实现动画相册

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

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

1.效果解析

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

20130505220725063

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;
}