您的位置：首页 > Web前端 > CSS

仅用css+HTML实现图片墙功能

2015-04-08 18:27 344 查看

备注：最好在firefox或chrome运行，在IE效果没出现 -。-

效果如下：

当鼠标移动到某一张图片时，另外也点击打开图片，会自动连接到大图片。

代码如下：

-----------NewFile.html--------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="NewFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="photo-album">
<h1><span>Angel <abbr title="and" class="amp">&</abbr> Girl in New Zealand</span></h1>
<a href="./images/1.jpg" class="large polaroid img1"><img src="./images/1_small.jpg" alt="" />This breathtaking volcanic lake is at Wai-O-Tapu Thermal Wonderland</a>
<a href="./images/2.jpg" class="polaroid img2"><img src="./images/2_small.jpg" alt="" />This lovely waterfall was at Rotorua in Rainbow Springs</a>
<a href="./images/3.jpg" class="small polaroid img3"><img src="./images/3_small.jpg" alt="" />Ferntastic</a>
<a href="./images/10.JPG" class="medium polaroid img4"><img src="./images/10_small.jpg" alt="" />At Kaikoura we went whale watching!</a>
<a href="./images/5.JPG" class="polaroid img5"><img src="./images/5_small.jpg" alt="" />Found this little cutie on a walk in New Zealand!</a>
<a href="./images/6.jpg" class="polaroid img6"><img src="./images/6_small.jpg" alt="" />An amazing bubbling volcanic spring, a bit muddy</a>
<a href="./images/7.JPG" class="polaroid img7"><img src="./images/7_small.jpg" alt="" />Simon in a giant Kiwi, pretending to be a Kiwi (the bird)</a>
<a href="./images/8.JPG" class="small polaroid img8"><img src="./images/8_small.jpg" alt="" />Albatross in Dunedin</a>
<a href="./images/9.JPG" class="medium polaroid img9"><img src="./images/9_small.jpg" alt="" />White water rafting in Queenstown</a>
<a href="./images/4.jpg" class="polaroid img10"><img src="./images/4_small.jpg" alt="" />White Island</a>
<a href="./images/11.JPG" class="small polaroid img11"><img src="./images/11_small.jpg" alt="" />Sulphurous</a>
<a href="./images/12.JPG" class="small polaroid img12"><img src="./images/12_small.jpg" alt="" />Sea lions!</a>
<a href="./images/13.JPG" class="small polaroid img13"><img src="./images/13_small.jpg" alt="" />Horse riding</a>
<a href="./images/14.JPG" class="small polaroid img14"><img src="./images/14_small.jpg" alt="" />Stewart Island</a>
<a href="./images/15.JPG" class="polaroid img15"><img src="./images/15_small.jpg" alt="" />Us in a blue cave on the Franz Josef glacier</a>
</div>
</body>
</html>

-----------NewFile.css--------

@CHARSET "UTF-8";
body {
background-color: #E9E9E9;
color: #f58f98;
font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;
font-size: 16px;
}

.amp {
font-family:Garamond,Baskerville,Georgia,serif !important;
font-style:italic;
font-weight:normal;
border: none;
color:#130c0e;
}
a.polaroid {
display: block;
text-decoration: none;
color: #333;
padding: 10px 10px 20px 10px;
width: 150px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 0 15px;
width: 150px;
height: 150px;
}

a img {
border: none;
display: block;
}

.photo-album {
position: relative;
width: 80%;
margin: 0 auto;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 800px;
max-width: 900px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album h1 {
position: absolute;
z-index: 5;
top: 150px;
text-align: center;
width: 100%;
line-height: 1.9;
}
.photo-album h1 span {
background-color: white;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
padding: 0.4em 0.8em 0.3em 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
border: 1px solid #6A6A6A;
}
.photo-album .small {
width: 75px;
padding: 6px 6px 12px 6px;
font-size: 0.6em;
}
.photo-album .small img {
width: 75px;
height: 75px;
}
.photo-album .medium {
width: 200px;
padding: 13px 13px 26px 13px;
font-size: 0.8em;
}
.photo-album .medium img {
width: 200px;
height: 200px;
}
.photo-album .large {
width: 300px;
padding: 20px 20px 30px 20px;
font-size: 1em;
}
.photo-album .large img {
width: 300px;
height: 300px;
}
.photo-album .img1 {
bottom: 10px;
right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.photo-album .img2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
left: 400px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.photo-album .img4 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.photo-album .img5 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img6 {
bottom: 10px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img7 {
bottom:0;
left:400px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img8 {
bottom: -20px;
left: 700px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
bottom: 0;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img11 {
top: 0;
right: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img12 {
top: 0;
left: 680px;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
transform: rotate(18deg);
}
.photo-album .img13 {
bottom: -20px;
right: 630px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img14 {
top: 90px;
left: 430px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img15 {
left:176px;
top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}

a:hover,
a:focus {
z-index: 5;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航