使用transition实现图片动画墙效果

 
 
上面的效果实现了图片的动画墙效果，别的不多说了，看了代码就一清二楚啦！
 
<!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>transition实现动画墙效果</title>
<style type="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="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
<img class="pic" src="people.jpg" />
</div>
<div>
<img class="mypic" src="people.jpg" />
</div>
</body>
</html>

 

 
 
posted @ 2013-03-15 21:04  Joy Ho  阅读(417)  评论(0)  编辑  收藏  举报