用CSS3製作照片牆的特效

來源:互聯網
上載者:User
這篇文章主要為大家詳細介紹了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還可以寫出更多的精彩絢麗效果,小夥伴有興趣可以深入的研究一下!

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.