照片墙
Posted 不忘初心 方得始终
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了照片墙相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="css/demo.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <div class="pic1 pic"><img src="img/1.jpg"/></div> 10 <div class="pic2 pic"><img src="img/2.jpg" /></div> 11 <div class="pic3 pic"><img src="img/3.png" /></div> 12 <div class="pic4 pic"><img src="img/4.jpg" /></div> 13 <div class="pic5 pic"><img src="img/5.jpg" /></div> 14 <div class="pic6 pic"><img src="img/6.jpeg" /></div> 15 <div class="pic7 pic"><img src="img/7.jpg" /></div> 16 <div class="pic8 pic"><img src="img/8.jpg" /></div> 17 <div class="pic9 pic"><img src="img/9.jpg" /></div> 18 </body> 19 </html>
1 .pic img{ 2 width:100px; 3 border:solid 2px #fff; 4 border-radius:12px; 5 cursor:pointer; 6 } 7 body{ 8 background-color:#ed9898; 9 } 10 .pic{ 11 position:absolute; 12 } 13 .pic1{ 14 transform:rotate(30deg); 15 top:100px; 16 left:100px; 17 } 18 .pic2{ 19 transform:rotate(-30deg); 20 top:150px; 21 left:150px; 22 } 23 24 .pic3{ 25 transform:rotate(40deg); 26 top:180px; 27 left:180px; 28 } 29 30 .pic4{ 31 transform:rotate(-20deg); 32 top:100px; 33 left:230px; 34 } 35 36 .pic5{ 37 transform:rotate(-40deg); 38 top:230px; 39 left:180px; 40 } 41 42 .pic6{ 43 transform:rotate(34deg); 44 top:140px; 45 left:250px; 46 } 47 48 .pic7{ 49 transform:rotate(55deg); 50 top:90px; 51 left:350px; 52 } 53 54 .pic8{ 55 transform:rotate(-22deg); 56 top:240px; 57 left:450px; 58 } 59 60 .pic9{ 61 transform:rotate(-24deg); 62 top:80px; 63 left:250px; 64 } 65 .pic:hover{ 66 transform:rotate(0deg) scale(1.5);/*0度归位*/ 67 transition:transform ease 1s; 68 z-index:2;/*默认是1，大的数字在上面*/ 69 }
以上是关于照片墙的主要内容，如果未能解决你的问题，请参考以下文章
百行代码制作一个属于猫主子的3D场景照片墙#yyds干货盘点#