讓一組圖片放大縮小-CSS方式，放大縮小-css

最後更新：2018-03-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本執行個體適用瀏覽器：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等測試正常

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More