CSS3 transition实现超酷图片墙动画效果
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 transform初体验之demo5</title> <style type="text/css"> body{ margin:0; padding:0; } a,a:hover{ text-decoration:none; } .box{ width:960px; height:450px; margin:60px auto 0; font-size:0.75em; position:relative; } .title{ position:absolute; padding:15px 40px; font-size:2em; border:1px solid #bbbbbb; background:white; -webkit-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); -moz-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); left:330px; top:100px; z-index:1; } .pic{ display:block; padding:10px 10px 15px; background:white; border:1px solid #bfbfbf; -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; position:absolute; } .pic img{ display:block; margin-bottom:10px; border:0; } .pic:hover,.pic:focus,.pic:active{ border-color:#9a9a9a; -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); transform:rotate(0deg) scale(1.05); z-index:1; } .pic1{bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg);} .pic2{top: 50px; right: 20px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg);} .pic3{left: 400px; top: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg);} .pic4{top: 10px; left: 495px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg);} .pic5{bottom: 0; right: 0; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); transform: rotate(1deg);} .pic6{bottom: 10px; right: 156px; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); transform: rotate(6deg);} .pic7{bottom:0; left:400px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg);} .pic8{bottom: -20px; left: 700px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);} .pic9{bottom: 0; left: 0; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);} .pic10{top: 0; left: 20px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); transform: rotate(8deg);} .pic11{top: 0; right: 0; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);} .pic12{top: 0; left: 680px; -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); transform: rotate(18deg);} .pic13{bottom: -20px; right: 630px; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); transform: rotate(4deg);} .pic14{top: 90px; left: 430px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);} .pic15{left:176px; top:20px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);} </style> </head> <body> <div class="box"> <h1 class="title">CSS3超酷美女图片墙</h1> <div id="box"> <script type="text/javascript"> var box = document.getElementById("box"); var pics = ""; for(var i=1; i<=15; i+=1){ var random_width = 100+ 106*Math.random(); pics += '<a href="#zhangxinxu" class="pic pic'+i+'"><img style="min-height:75px;" width="'+random_width+'" src="image/mm'+i+'.jpg" /></a>'; } box.innerHTML = pics; </script> </div> </div> </body> </html>
自己试了都写成活的，但是有点问题，明天修改：
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 transform初体验之demo5</title> <style type="text/css"> body{ margin:0; padding:0; } a,a:hover{ text-decoration:none; } .box{ width:960px; height:450px; margin:60px auto 0; font-size:0.75em; position:relative; } .title{ position:absolute; padding:15px 40px; font-size:2em; border:1px solid #bbbbbb; background:white; -webkit-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); -moz-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4); left:330px; top:100px; z-index:1; } .pic{ display:block; padding:10px 10px 15px; background:white; border:1px solid #bfbfbf; -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; position:absolute; } .pic img{ display:block; margin-bottom:10px; border:0; } .pic:hover,.pic:focus,.pic:active{ border-color:#9a9a9a; -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); transform:rotate(0deg) scale(1.05); z-index:1; } </style> </head> <body> <div class="box"> <h1 class="title">CSS3超酷美女图片墙</h1> <div id="box"> <script type="text/javascript"> var box = document.getElementById("box"); var pics = ""; for(var i=1; i<=15; i+=1){ var random_width = Math.floor(100+ 106*Math.random()); var left=Math.floor(Math.random()*900); var top=Math.floor(1+ 400*Math.random()); var transform=Math.floor(Math.random()*45); pics+='<a class="pic pic'+i+'" style="position:absolute;left:'+left+'px;top:'+top+'px;transform:rotate('+transform+'deg);-webkit-transform:rotate('+transform+'deg); -moz-transform:rotate('+transform+'deg)"><img style="min-height:75px;'+random_width+'px" src="http://image.zhangxinxu.com/image/study/s/s256/mm'+i+'.jpg"/></a>'; } box.innerHTML = pics; </script> </div> </div> </body> </html>