TPTCMS

七小时带你入门HTML+CSS网页设计,简单图片列表缩放特效(六)

HTMLCSS网页设计图片列表特效2018-10-01 00:24:34

大家好,这篇文章给大家分享怎么样设计一个简单的图片列表缩放特效页面

话不多说,直接看效果图:

image

html代码:

<div class="tpt-img">
    <img class="a" src="https://tpt360.com/tuimg/yan.png">
    <div class="b a">
        <div class="c"></div>
        <div class="d">
            简单图片列表缩放特效
        </div>
    </div>
</div>

知识点:

css:hover选择器是在鼠标移动到对应标签上的特殊样式,它可以用于所有元素。

css3 transform属性应用于元素的2D或3D转换,如旋转、缩放、移动、倾斜等。

css3 transition属性是在一定的时间范围内平滑地过渡效果,参数为时间,单位为s(秒)或者ms(毫秒)。

注意,以上的css3特效属性都要考虑浏览器的兼容性,如:

div {
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);  /* Safari 和 Chrome */
    -moz-transform: scale(1.2,1.2);  /* Firefox */
    -ms-transform: scale(1.2,1.2)  /* IE 9 */
    -o-transform: scale(1.2,1.2);  /* Opera */
}

CSS代码:

.tpt-img {
    position: relative;
    overflow: hidden;
    margin: 10px;
    width: 350px;
    height: 250px
}
.tpt-img img {
    z-index: 0;
    float: left;
    height: 100%;
    width: 100%
}
.tpt-img:hover img {
    opacity: 0.8;
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2)
}
.tpt-img .a {
    transition: all .40s ease-in-out;
    -webkit-transition: all .40s ease-in-out;
    -moz-transition: all .40s ease-in-out;
    -ms-transition: all .40s ease-in-out;
    -o-transition: all .40s ease-in-out
}
.tpt-img .b {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 250px;
    height: 100%;
    width: 100%;
}
.tpt-img:hover .b {
    opacity: 1;
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px)
}
.tpt-img .c {
    z-index: 1;
    background: #8ec1cd;
    position: absolute;
    height: 100%;
    width: 100%
}
.tpt-img .d {
    z-index: 2;
    color: #fff;
    position: absolute;
    line-height: 50px;
    text-align: center;
    height: 100%;
    width: 100%
}

这样一个简单的图片列表缩放特效就完成了,当然,布局的方式有很多种,这只是其中一个方法,也欢迎大家留言分享一下其他的布局方式,谢谢观看!!!