让一组图片放大缩小-CSS方式

最新推荐文章于 2025-03-11 12:09:31 发布

xtuwz

最新推荐文章于 2025-03-11 12:09:31 发布

阅读量754

点赞数

分类专栏：网页开发文章标签： CSS 图片缩放

网页开发专栏收录该内容

0 篇文章

订阅专栏

本实例适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器

源码当前目录放image-01.jpg和image-02.jpg即可

index.html源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3实现鼠标悬停放大照片墙特效 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
测试浏览器兼容：ie9+,chrome,FF,safari;
</p>
<ul class="polaroids">
<li><a href="#" title="Roelan"><img src="image-01.jpg" alt="Roeland!"></a></li>
<li><a href="#" title="Discus"><img src="image-02.jpg" alt="Discussion"></a></li>
<li><a href="#" title="A Hear"><img src="image-01.jpg" alt="A Hearty Laugh"></a></li>
<li><a href="#" title="Evil M"><img src="image-02.jpg" alt="Evil Matt Coding"></a></li>
<li><a href="#" title="Scribb"><img src="image-01.jpg" alt="Scribbles"></a></li>
<li><a href="#" title="Amanda"><img src="image-02.jpg" alt="Amanda Glares..."></a></li>
<li><a href="#" title="The Do"><img src="image-01.jpg" alt="The Dougernaut"></a></li>
<li><a href="#" title="I See "><img src="image-02.jpg" alt="I See You!"></a></li>
<li><a href="#" title="Rock H"><img src="image-01.jpg" alt="Rock Hard Balls"></a></li>
<li><a href="#" title="Bocce "><img src="image-02.jpg" alt="Bocce Ball"></a></li>
<li><a href="#" title="Boris "><img src="image-01.jpg" alt="Boris "Tatooine""></a></li>
<li><a href="#" title="Sneake"><img src="image-02.jpg" alt="Sneakers & Stilettos"></a></li>
</ul>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;color:red">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

CSS文件源码如下style.css

/* RESET */
body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
input,button,textarea{border:none 0}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}
a:link{text-decoration:none}
a:visited{text-decoration:none}
a:hover{text-decoration:none}

.clear{zoom:1}
.clear:after{content:"";display:block;clear:both}
/* polaroids */
.polaroids{width:970px;margin:0 0 18px 10px;}
.polaroids li{display: inline;}
.polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
-o-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
}
.polaroids img{display: block;width:190px;margin-bottom:12px;}
.polaroids a:after{content: attr(title);/* Ie8+,FF,Chorme,Safari */}
.polaroids li:nth-child(even) a{
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
.polaroids li:nth-child(3n) a{
-webkit-transform:none;
-moz-transform:none;
-ms-transform:rotate(2deg);
transform:none;
position: relative;
top:-5px;
}
.polaroids li:nth-child(5n) a{
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
transform:rotate(5deg);
position: relative;
right:5px;
}
.polaroids li:nth-child(8n) a{
position: relative;
top:8px;
right:5px;
}
.polaroids li:nth-child(11n) a{
position: relative;
top:3px;
right:-5px;
}
.polaroids li a:hover{
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
transform:scale(1.25);
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
-o-box-shadow:0 3px 6px rgba(0,0,0,.5);
box-shadow:0 3px 6px rgba(0,0,0,.5);
position: relative;
z-index: 5;
}
.polaroids li.messy a{margin-top:-375px;margin-left:160px;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}

在chrome，ie等测试正常