查看: 867|回复: 0

CSS3实现照片墙的效果


16-5-3 16:37:43 | [复制链接]

38

主题

200

帖子

436

积分

牛人

Rank: 3Rank: 3

发表于 16-5-3 16:37:43 | 显示全部楼层 |阅读模式
CSS3实现照片墙的效果



  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>照片墙</title>
  6. <style>
  7. body{background: #eee;}
  8. h1{text-align: center;}
  9. .container{width: 960px;height: 450px;margin:60px auto; position: relative;}
  10. img{
  11. padding: 10px 10px 15px;
  12. background: #fff;
  13. border:1px solid #ddd;
  14. position:absolute;
  15. -webkit-transition: 2s ;
  16. -moz-transition: 2s ;
  17. transition: 2s ;
  18. }
  19. img:hover{
  20. -webkit-transform:rotate(0deg);
  21. -moz-transform:rotate(0deg);
  22. transform:rotate(0deg);
  23. -webkit-transform:scale(1.2);
  24. -moz-transform:scale(1.2);
  25. transform:scale(1.2);
  26. box-shadow: 10px 10px 15px #ccc;
  27. }
  28. .pic1{
  29. left:400px;
  30. top:0px;
  31. -webkit-transform:rotate(-5deg);
  32. -moz-transform:rotate(-5deg);
  33. transform:rotate(-5deg);
  34. z-index: 1;
  35. }
  36. .pic2{
  37. left:600px;
  38. top:0px;
  39. -webkit-transform:rotate(-5deg);
  40. -moz-transform:rotate(-5deg);
  41. transform:rotate(-5deg);
  42. z-index: 2;
  43. }
  44. .pic3{
  45. left:0px;
  46. top:0px;
  47. -webkit-transform:rotate(-5deg);
  48. -moz-transform:rotate(-5deg);
  49. transform:rotate(-5deg);
  50. z-index: 3;
  51. }
  52. .pic4{
  53. left:300px;
  54. bottom:0px;
  55. -webkit-transform:rotate(-5deg);
  56. -moz-transform:rotate(-5deg);
  57. transform:rotate(-5deg);
  58. z-index: 4;
  59. }
  60. .pic5{
  61. left:0px;
  62. bottom:0px;
  63. -webkit-transform:rotate(-5deg);
  64. -moz-transform:rotate(-5deg);
  65. transform:rotate(-5deg);
  66. z-index: 5;
  67. }
  68. .pic6{
  69. left:0px;
  70. top:0px;
  71. -webkit-transform:rotate(-5deg);
  72. -moz-transform:rotate(-5deg);
  73. transform:rotate(-5deg);
  74. z-index: 6;
  75. }
  76. .pic7{
  77. left:850px;
  78. top:0px;
  79. -webkit-transform:rotate(-5deg);
  80. -moz-transform:rotate(-5deg);
  81. transform:rotate(-5deg);
  82. z-index: 7;
  83. }
  84. .pic8{
  85. left:630px;
  86. bottom:-20px;
  87. -webkit-transform:rotate(-5deg);
  88. -moz-transform:rotate(-5deg);
  89. transform:rotate(-5deg);
  90. z-index: 8;
  91. }
  92. .pic9{
  93. left:550px;
  94. top:90px;
  95. -webkit-transform:rotate(-5deg);
  96. -moz-transform:rotate(-5deg);
  97. transform:rotate(-5deg);
  98. z-index: 9;
  99. }
  100. .pic10{
  101. left:180px;
  102. top:20px;
  103. -webkit-transform:rotate(-5deg);
  104. -moz-transform:rotate(-5deg);
  105. transform:rotate(-5deg);
  106. z-index: 10;
  107. }
  108. </style>
  109. </head>
  110. <body>
  111. <h1>照片墙制作</h1>
  112. <div class="container">
  113. <img class="pic1" src="images/mm1.jpg" alt="">
  114. <img class="pic2" src="images/mm2.jpg" alt="">
  115. <img class="pic3" src="images/mm3.jpg" alt="">
  116. <img class="pic4" src="images/mm4.jpg" alt="">
  117. <img class="pic5" src="images/mm5.jpg" alt="">
  118. <img class="pic6" src="images/mm6.jpg" alt="">
  119. <img class="pic7" src="images/mm7.jpg" alt="">
  120. <img class="pic8" src="images/mm8.jpg" alt="">
  121. <img class="pic9" src="images/mm9.jpg" alt="">
  122. <img class="pic10" src="images/mm10.jpg" alt="">
  123. </div>
  124. </body>
  125. </html>
复制代码



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

  • 1024程序员节刚过 千锋教育设计学院万圣节海报设计决赛开启

千锋教育公众号

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3 )

GMT+8, 20-2-27 15:33 , Processed in 0.257604 second(s), 40 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表