本文為大家分享在制作網(wǎng)頁的時候如何利用CSS3動畫制作照片墻的詳細(xì)步驟，供大家參考，具體內(nèi)容如下
第一種實現(xiàn)效果：
Html代碼如下:
1. <body>
2. <h2>照片墻制作</h2>
3. <div class="container">
4. <img class="img1" src="img/img (1).jpg" height="150" width="150" alt="">
5. <img class="img2" src="img/img (2).jpg" height="160" width="200" alt="">
6. <img class="img3" src="img/img (3).jpg" height="170" width="200" alt="">
7. <img class="img4" src="img/img (4).jpg" height="240" width="200" alt="">
8. <img class="img5" src="img/img (5).jpg" height="300" width="300" alt="">
9. </div>
10. </body>
11.
CSS代碼如下:
1. <style>
2. * {margin:0; padding:0;}
3. body { background-color: #eee; padding-top: 50px;}
4. h2 { text-align: center;}
5. .container { position: relative; width:1000px; height:700px; margin:0px auto; }
6. img { position: absolute; top:50px; left:100px; cursor: pointer;
7. padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;
8. transition:0.5s; box-shadow: 3px 3px 3px #ccc;
9. }
10. .img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}
11. .img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}
12. .img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}
13. .img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}
14. .img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}
15. img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}
16. </style>
效果圖:
第二種實現(xiàn)效果：
第一部分：HTML
這里我們首先放十張圖片在頁面上面。（什么照片都可以，但是尺寸要處理成一樣）
1. <div class="content">
2. <img class="pic1" src="img/1.jpg" />
3. <img class="pic2" src="img/2.jpg" />
4. <img class="pic3" src="img/3.jpg" />
5. <img class="pic4" src="img/4.jpg" />
6. <img class="pic5" src="img/5.jpg" />
7. <img class="pic6" src="img/6.jpg" />
8. <img class="pic7" src="img/7.jpg" />
9. <img class="pic8" src="img/8.jpg" />
10. <img class="pic9" src="img/9.jpg" />
11. <img class="pic10" src="img/10.jpg" />
12. </div>
13.
第二部分：CSS3
這一部分就是我們這節(jié)的重點了，如照片的位置各不相同，我們肯定會用到CSS3一下的知識點：
CSS3的旋轉(zhuǎn) rotate
CSS3的縮放 scale
CSS3的陰影 box-shadow
沒錯就是這些功能我們就可以做一個漂亮的照片墻了。看看下面代碼是怎么寫的！
1. body{
2. background: url(../img/bg1.jpg) no-repeat top center fixed;
3. background-size: 100% auto;
4. }
5. .content{
6. width: 900px;
7. height: 1000px;
8. overflow: hidden;
9. margin: 100px auto;
10. position: relative;
11. }
12. img{
13. z-index: 1;
14. width: 20%;
15. height: auto;
16. position: absolute;
17. padding: 10px 10px 15px 10px;
18. background: #ffffff;
19. border: 1px solid #CCCCCC;
20. /* 動畫的時間 */
21. -moz-transition: 0.5s;
22. -webkit-transition: 0.5s;
23. transition: 0.5s;
24. }
25. img:hover{
26. z-index: 2;
27. transform: scale(1.5);
28. -moz-transform: scale(1.5) ;
29. -webkit-transform: scale(1.5) ;
30. box-shadow: -10px 10px 20px #000000;
31. -moz-box-shadow: -10px 10px 20px #000000;
32. -webkit-box-shadow: -10px 10px 20px #000000;
33. }
34. .pic1{
35. left: 100px;
36. top: 50px;
37. -webkit-transform: rotate(20deg);
38. -moz-transform: rotate(20deg);
39. transform: rotate(20deg);
40. }
41. .pic2{
42. left: 280px;
43. top: 60px;
44. -webkit-transform: rotate(-10deg);
45. -moz-transform: rotate(-10deg);
46. transform: rotate(-10deg);
47. }
就是這么簡單的代碼就可以實現(xiàn)多圖照片墻的效果了。朋友們有興趣的自己動手嘗試一下吧。
PS： CSS3還可以寫出更多的精彩絢麗效果，小伙伴有興趣可以深入的研究一下！
【 微信掃一掃 】
