<h1 style="text-align: center">Olivia Palermo</h1>
<div class="container">
<img class="pic1" src="Olivia Palermo/Olivia%20Palermo1.jpg" style="width: 150px">
<img class="pic2" src="Olivia Palermo/Olivia%20Palermo2.jpg" style="width: 150px">
<img class="pic3" src="Olivia Palermo/Olivia%20Palermo3.jpg" style="width: 150px">
<img class="pic4" src="Olivia Palermo/Olivia%20Palermo4.jpg" style="width: 150px">
<img class="pic5" src="Olivia Palermo/Olivia%20Palermo5.jpg" style="width: 150px">
<img class="pic6" src="Olivia Palermo/Olivia%20Palermo6.jpg" style="width: 150px">
<img class="pic7" src="Olivia Palermo/Olivia%20Palermo7.jpg" style="width: 150px">
<img class="pic8" src="Olivia Palermo/Olivia%20Palermo8.jpg" style="width: 150px">
<img class="pic9" src="Olivia Palermo/Olivia%20Palermo9.jpg" style="width: 150px">
<img class="pic10" src="Olivia Palermo/Olivia%20Palermo10.jpg" style="width: 150px">
<img class="pic11" src="Olivia Palermo/Olivia%20Palermo11.jpg" style="width: 150px">
</div>
</body>
HTML部分给出一个<div>然后放入10张图片
以下是style.css部分的效果代码:
body{
background-color: #eeeeee;
}
.container{
margin: 60px auto;
width: 960px;
position: relative;
}
img{
padding: 10px 10px 15px;
border: 1px solid white;
background: #ffffff;
position: absolute;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
z-index: 1;
}
img:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
box-shadow: 10px 10px 15px #ccc;
z-index: 2;
}
.pic1{
top: 50px;
left: 200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.pic2{
top: 500px;
left: 10px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.pic3{
top: 250px;
left: 200px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
.pic4{
top: 330px;
left: 110px;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
.pic5{
top: 50px;
left: 840px;
-webkit-transform: rotate(28deg);
-moz-transform: rotate(28deg);
-ms-transform: rotate(28deg);
-o-transform: rotate(28deg);
transform: rotate(28deg);
}
.pic6{
top: 300px;
left: 470px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
.pic7{
top: 501px;
left: 740px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.pic8{
top: 316px;
left: 500px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.pic9{
top: 650px;
left: 940px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.pic10{
top: 50px;
left: 430px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.pic11{
top: 658px;
left: 40px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}