- 博客分类:
效果图:
1.
2.
....
鼠标放在图片上,图片选择一定角度,放大,有阴影效果.
实现代码:
html:
伦理片 http://www.dotdy.com/
- <!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);
- }
影音先锋电影 http://www.iskdy.com/
很好懂的.
补充: