這篇文章主要為大家詳細介紹了CSS3製作漂亮的照片牆的具體步驟,具有一定的參考價值,有興趣的小伙伴們可以參考一下
本文實例為大家分享利用CSS3動畫製作照片牆的詳細步驟,供大家參考,具體內容如下
第一種實現效果:
Html程式碼如下:
<body> <h2>照片墙制作</h2> <p class="container"> <img class="img1" src="img/img (1).jpg" height="150" width="150" alt=""> <img class="img2" src="img/img (2).jpg" height="160" width="200" alt=""> <img class="img3" src="img/img (3).jpg" height="170" width="200" alt=""> <img class="img4" src="img/img (4).jpg" height="240" width="200" alt=""> <img class="img5" src="img/img (5).jpg" height="300" width="300" alt=""> </p> </body>
CSS程式碼如下:
<style> * {margin:0; padding:0;} body { background-color: #eee; padding-top: 50px;} h2 { text-align: center;} .container { position: relative; width:1000px; height:700px; margin:0px auto; } img { position: absolute; top:50px; left:100px; cursor: pointer; padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd; transition:0.5s; box-shadow: 3px 3px 3px #ccc; } .img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;} .img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;} .img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;} .img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;} .img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;} img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;} </style>
效果圖:
#第二種實作效果:
第一部分:HTML
這裡我們先放十張圖片在頁面上面。 (有什麼靚照儘管上來哦!)
<p class="content"> <img class="pic1" src="img/1.jpg" /> <img class="pic2" src="img/2.jpg" /> <img class="pic3" src="img/3.jpg" /> <img class="pic4" src="img/4.jpg" /> <img class="pic5" src="img/5.jpg" /> <img class="pic6" src="img/6.jpg" /> <img class="pic7" src="img/7.jpg" /> <img class="pic8" src="img/8.jpg" /> <img class="pic9" src="img/9.jpg" /> <img class="pic10" src="img/10.jpg" /> </p>
第二部分:CSS3
這一部分就是我們這節的重點了,如上圖所示照片的位置各不相同,我們一定會用到CSS3一下的知識點:
#CSS3的旋轉rotate
CSS3的縮放scale
CSS3的陰影box- shadow
沒錯就是這些功能我們就可以做一個漂亮的照片牆了。來看看我們的程式碼吧,這裡只展示部分程式碼了聰明的小夥伴一定知道怎麼做的!
body{ background: url(../img/bg1.jpg) no-repeat top center fixed; background-size: 100% auto; } .content{ width: 900px; height: 1000px; overflow: hidden; margin: 100px auto; position: relative; } img{ z-index: 1; width: 20%; height: auto; position: absolute; padding: 10px 10px 15px 10px; background: #ffffff; border: 1px solid #CCCCCC; /* 动画的时间 */ -moz-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; } img:hover{ z-index: 2; transform: scale(1.5); -moz-transform: scale(1.5) ; -webkit-transform: scale(1.5) ; box-shadow: -10px 10px 20px #000000; -moz-box-shadow: -10px 10px 20px #000000; -webkit-box-shadow: -10px 10px 20px #000000; } .pic1{ left: 100px; top: 50px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); } .pic2{ left: 280px; top: 60px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } /* 下面的代码大同小异就不依依展示了 */
就是這麼簡單的程式碼就可以實現上圖所示的效果了。小朋友有興趣的自己試試看把自己的靚照放上去看看。
PS: CSS3還可以寫出更多精彩的絢麗效果,朋友們有興趣可以深入的研究一下!
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關建議:
以上是用CSS3製作照片牆的特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!