DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" />
<title>transition实现动画墙效果title>
<style type&＃61;"text/css">
.pic{float:left;display:block;background-color:#fff;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);margin:10px;-webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);-moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);-webkit-transition:all 0.5s ease-in;}
.pic:hover,.pic:focus,.pic:active{border-color:#9a9a9a;-webkit-transform:rotate(0deg) scale(2);-moz-transform:rotate(0deg) scale(2);transform:rotate(0deg);position:relative;z-index:100;}
.mypic{display:block;width:256px;margin:60px 0 0;padding:10px 10px 15px;text-align:center;background:white;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);-webkit-transition:all 0.5s ease-in;}
.mypic:hover,.mypic:focus,.mypic: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);-webkit-transform:rotate(0deg) scale(1.05);-moz-transform:rotate(0deg) scale(1.05);transform:rotate(0deg) scale(1.05);}
style>
head><body>
<div>
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
<img class&＃61;"pic" src&＃61;"people.jpg" />
div>
<div>
<img class&＃61;"mypic" src&＃61;"people.jpg" />
div>
body>
html>
京公网安备 11010802041100号