css3照片墙

最新推荐文章于 2025-05-20 16:26:52 发布

转载最新推荐文章于 2025-05-20 16:26:52 发布 · 318 阅读

博客分类：

效果图:

2.

....

鼠标放在图片上，图片选择一定角度，放大，有阴影效果.

实现代码:

html:

伦理片 http://www.dotdy.com/

     Html代码  
     
    
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   <title>css3照片墙</title>  
     
   <link href="linkcss.css" type="text/css" rel="stylesheet"/>  
     
 </head>  
   
 <body>  
   <h1>照片墙制作</h1>  
   <div class="container">  
      <img class="pic1" src="imges/1.jpg" />  
      <img class="pic2" src="imges/2.jpg" />  
      <img class="pic3" src="imges/3.jpg" />  
      <img class="pic4" src="imges/4.jpg" />  
      <img class="pic5" src="imges/5.jpg" />  
      <img class="pic6" src="imges/6.jpg" />  
      <img class="pic7" src="imges/7.jpg" />  
   </div>  
 </body>  
 </html>  

css:

     Html代码  
     
    
 body{background:#eee}  
 h1{text-align:center}  
 .container{width:960px;height:450px;margin:60px auto;position:relative}  
 img{padding:10px 10px 15px;background:#fff;border:1px solid #ddd;position:absolute;transition:1s;  
 z-index:1}  
 img:hover{  
        transform:rotate(0deg);  
        transform:scale(1.2);  
        box-shadow:10px -10px 15px #ccc;  
        z-index:2000;  
         }  
 .pic1{  
     top:20px;left:450px;transform:rotate(-25deg);  
     }  
       
 .pic2{  
     top:50px;left:10px;transform:rotate(30deg);  
     }  
 .pic3{  
     top:150px;left:150px;transform:rotate(40deg);  
     }  
 .pic4{  
     top:150px;left:550px;transform:rotate(25deg);  
     }  
 .pic5{  
     top:250px;left:10px;transform:rotate(-10deg);  
     }  
 .pic6{  
     top:250px;left:450px;transform:rotate(30deg);  
     }  
 .pic7{  
     top:250px;left:250px;transform:rotate(15deg);  
     }  