css3照片墙
效果图:
1.
2.
....
鼠标放在图片上,图片选择一定角度,放大,有阴影效果.
实现代码:
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); }
很好懂的.
补充:
我用的是谷歌浏览器,如果出现浏览器不兼容问题,可以试试在transform前加标识,比如-webkit,-moz的.
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18