首页 > Web开发 > 详细

css3照片墙

时间:2015-11-04 02:18:05      阅读:365      评论:0      收藏:0      [点我收藏+]

效果图:

1.
?bubuko.com,布布扣?
?

2.
?bubuko.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:

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);
	}

?

?很好懂的.

?补充:

?
??bubuko.com,布布扣
?

?我用的是谷歌浏览器,如果出现浏览器不兼容问题,可以试试在transform前加标识,比如-webkit,-moz的.

css3照片墙

原文:http://cb123456.iteye.com/blog/2254239

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!