关闭

css3照片墙

123人阅读 评论(0) 收藏 举报


    博客分类:

效果图:

1.
  
 

2.
 
 ....

 

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

 

 实现代码:

 html:

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

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  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>css3照片墙</title>  
  6.     
  7.   <link href="linkcss.css" type="text/css" rel="stylesheet"/>  
  8.     
  9. </head>  
  10.   
  11. <body>  
  12.   <h1>照片墙制作</h1>  
  13.   <div class="container">  
  14.      <img class="pic1" src="imges/1.jpg" />  
  15.      <img class="pic2" src="imges/2.jpg" />  
  16.      <img class="pic3" src="imges/3.jpg" />  
  17.      <img class="pic4" src="imges/4.jpg" />  
  18.      <img class="pic5" src="imges/5.jpg" />  
  19.      <img class="pic6" src="imges/6.jpg" />  
  20.      <img class="pic7" src="imges/7.jpg" />  
  21.   </div>  
  22. </body>  
  23. </html>  

 

 css:

Html代码  收藏代码
  1. body{background:#eee}  
  2. h1{text-align:center}  
  3. .container{width:960px;height:450px;margin:60px auto;position:relative}  
  4. img{padding:10px 10px 15px;background:#fff;border:1px solid #ddd;position:absolute;transition:1s;  
  5. z-index:1}  
  6. img:hover{  
  7.        transform:rotate(0deg);  
  8.        transform:scale(1.2);  
  9.        box-shadow:10px -10px 15px #ccc;  
  10.        z-index:2000;  
  11.         }  
  12. .pic1{  
  13.     top:20px;left:450px;transform:rotate(-25deg);  
  14.     }  
  15.       
  16. .pic2{  
  17.     top:50px;left:10px;transform:rotate(30deg);  
  18.     }  
  19. .pic3{  
  20.     top:150px;left:150px;transform:rotate(40deg);  
  21.     }  
  22. .pic4{  
  23.     top:150px;left:550px;transform:rotate(25deg);  
  24.     }  
  25. .pic5{  
  26.     top:250px;left:10px;transform:rotate(-10deg);  
  27.     }  
  28. .pic6{  
  29.     top:250px;left:450px;transform:rotate(30deg);  
  30.     }  
  31. .pic7{  
  32.     top:250px;left:250px;transform:rotate(15deg);  
  33.     }  


影音先锋电影 http://www.iskdy.com/ 

 很好懂的.

 补充:

 
  
 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:125439次
    • 积分:2018
    • 等级:
    • 排名:第19111名
    • 原创:0篇
    • 转载:504篇
    • 译文:0篇
    • 评论:6条
    文章存档