欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

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

 

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

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

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

简单图片列表缩放特效

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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao50894.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-27 22:28 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。