CSS3制作漂亮的照⽚墙的实现代码
CSS3可以做动画⼤家肯定都是⽿熟能详的了，但是⼤家有⽊有巧妙的利⽤这⼀个功能来制作⼀款漂亮的照⽚墙呢？
那么今天我们就利⽤CSS3动画这⼀特性来⼀起制作漂亮的照⽚墙吧！
第⼀部分：HTML
这⾥我们⾸先放⼗张图⽚在页⾯上⾯。（有什么靓照尽管上来哦！）
XML/HTML Code复制内容到剪贴板
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>
第⼆部分：CSS3
这⼀部分就是我们这节的重点了，如上图所⽰照⽚的位置各不相同，我们肯定会⽤到CSS3⼀下的知识点：
•CSS3的旋转 rotate
•CSS3的缩放 scale
•CSS3的阴影 box-shadow
没错就是这些功能我们就可以做⼀个漂亮的照⽚墙了。来看看我们的代码吧，这⾥只展⽰部分代码了聪明的⼩伙伴肯定知道怎么做的！
CSS Code复制内容到剪贴板
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. }
好看的css代码41. .pic2{
42. left: 280px;
43. top: 60px;
44. -webkit-transform: rotate(-10deg);
45. -moz-transform: rotate(-10deg);
46. transform: rotate(-10deg);
47. }/* 下⾯的代码⼤同⼩异就不依依展⽰了 */
就是这么简单的代码就可以实现上图所⽰的效果了。⼩伙伴们有兴趣的⾃⼰动⼿尝试⼀下把⾃⼰的靓照放上去看看。
PS： CSS3还可以写出更多的精彩绚丽效果，⼩伙伴有兴趣可以深⼊的研究⼀下！
以上这篇CSS3制作漂亮的照⽚墙的实现代码就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论