使用CSS3動畫實現絢麗的照片牆效果


臨近畢業了,一大波畢業照又要來襲了!如何使用CSS3屬性制作出自己的網頁版照片牆呢?

閑話少說,先來看看效果圖

效果要求:

1,照片要求有一定的白色邊框。

2,照片都要有一定的傾斜角度。

3,鼠標移動到一張照片上時,圖片會旋轉並擺正顯示。

4,當移動到下面被遮擋的照片時,下面的照片會顯示在最上層。

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片牆效果</title>
<link href="pic.css" rel="stylesheet" />
</head>

<body>
<div class="container">
<h1>照片牆</h1>
<img src="images/01.jpg" class="pic1" />
<img src="images/02.jpg" class="pic2" />
<img src="images/03.jpg" class="pic3" />
<img src="images/04.jpg" class="pic4" />
<img src="images/05.jpg" class="pic5" />
<img src="images/06.jpg" class="pic6" />
</div>
</body>
</html>

css文件

body{
margin:0
padding:0;
background-color:#eee;
}
h1{
text-align:center;
}
.container{
width:1300px;
height:800px;
margin:60px auto;
position:relative/*使得照片定位參照容器*/
}
.container img{
background:#FFF;
padding:10px 10px 15px;
position:absolute;
box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
z-index:1;
}
.container img:hover{
box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-webkit-transform:rotate(0deg) scale(1.20);
-moz-transform:rotate(0deg) scale(1.20);
transform:rotate(0deg) scale(1.20);
z-index:2;
}
.pic1{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
position: absolute;
left: 519px;
top: 121px;
}
.pic2{
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
position: absolute;
left: 212px;
top: 57px;
}

.pic3
{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
position: absolute;
z-index: 1;
top: 55px;
right: 139px;
}

.pic4
{

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
left:750px;
top:200px;
}

.pic5
{

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
left: 550px;
top: 210px;
}

.pic6
{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
position: absolute;
left: 300px;
top: 200px;
}

總結一下實現技術的關鍵點

1.定位position:照片外包裹層設置為relative,照片設置為absolute,使得照片定位會參照外面包裹層定位。

2,z-index屬性:照片在原始擺放時會有部分重疊,當鼠標移動到上時,我們需要使得它在最上面顯示,所以我們先把所有照片的z-index設置為1,當鼠標移動到時,即hover:我們把他們z-index設置成2就可以了

3,把照片公有屬性定義到img{}之中,再把每張照片私有屬性設置到具體每一張照片之中,如pic1{}

還在等什么,快給你女朋友做一個絢麗的照片牆吧!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com