CSS3如何制作漂亮的照片墻

這篇文章主要為大家展示了“CSS3如何制作漂亮的照片墻”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS3如何制作漂亮的照片墻”這篇文章吧。

利用CSS3動畫這一特性來一起制作漂亮的照片墻吧！

第一部分：HTML

這里我們首先放十張圖片在頁面上面。

<div 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" />  
 </div>

第二部分：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);   
}/*   下面的代碼大同小異就不依依展示了    */

以上是“CSS3如何制作漂亮的照片墻”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！