css3照片墙

转载 2015年11月17日 18:09:16


博客分类:

效果图:

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/ 

 很好懂的.

 补充:

 
  
 

照片墙css3

  • 2015年08月30日 17:34
  • 99KB
  • 下载

css3和html5照片墙

  • 2015年01月12日 23:35
  • 99KB
  • 下载

css3照片墙

无标题文档 #container{ position:relative; width:960px; height:800px; margin:80px au...

Jquery+css3实现瀑布流照片墙特效

  • 2013年03月14日 15:37
  • 17KB
  • 下载

css3创建六边形照片墙

  • 2015年01月15日 17:13
  • 413KB
  • 下载

css3实现照片墙

在网站上经常可以看到照片墙的展示,于是动手用css3写了一个简单的照片墙。其实就是css3样式的一些新特效的使用。 作品展示: 接下来贴上实现的代码: html结构: ...

css3实现照片墙

  • 2014年11月21日 17:47
  • 168KB
  • 下载

HTML5+CSS3实战(二)——照片墙效果

现在的前端做的越来越炫酷了,各种特效让人眼花缭乱。 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看。 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大; 鼠...

CSS3+HTML+纯JS实现的照片墙效果

  • 2015年10月12日 16:21
  • 11.46MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3照片墙
举报原因:
原因补充:

(最多只允许输入30个字)