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

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

话不多说，直接看效果图：

简单图片列表缩放特效

html代码：

简单图片列表缩放特效

知识点：

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%

}