CSS3实现照片墙的重点和代码是什么

这篇文章主要介绍“CSS3实现照片墙的要点和代码是什么”，有一些人在CSS3实现照片墙的要点和代码是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

第一部分：HTML

这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！）

XML/HTML Code 复制内容到剪贴板

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

没错就是这些功能我们就可以做一个漂亮的照片墙了。来看看我们的代码吧，这里只展示部分代码了聪明的小伙伴肯定知道怎么做的！

CSS Code 复制内容到剪贴板

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实现照片墙的要点和代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!