css3 transform transition 实现照片墙效果

来源：互联网发布：淘宝卖新鲜苹果没人买编辑：程序博客网时间：2024/04/30 06:00

实现动态的照片墙效果，主要用到css3的transform 属性和 transition属性。

以下是全部代码：

css代码：

*{    margin: 0;    padding: 0;}body{    background-color: #eeeeee;}.container{    width:960px;    height: 450px;    margin: 60px auto;    position: relative;}.pic{    width:190px;}.container img:hover{    box-shadow: 15px 15px 20px rgba(50,50,50,0.4);    z-index: 2;    transform: rotate(0deg) scale(1.20);    -webkit-transform: rotate(0deg) scale(1.20);}.container img{    padding: 10px 10px 15px;    background-color: white;    border: 1px solid #ddd;    box-shadow: 2px 2px 3px rgba(50,50,50,0.4);    z-index: 1;    -webkit-transition: all 0.5s ease-in;    -moz-transition: all 0.5s ease-in;    -ms-transition:all 0.5s ease-in;    -o-transition: all 0.5s ease-in;    transition: all 0.5s ease-in;    position: absolute;}.pic1{    left: 400px;    top:0px;    transform: rotate(-5deg);    -webkit-transform: rotate(-5deg);}.pic2{    left:200px;    top:0px;    transform: rotate(-20deg);    -webkit-transform: rotate(-20deg);}.pic3{    bottom:100px;    right:100px;    transform: rotate(5deg);    -webkit-transform: rotate(5deg);}.pic4{    bottom: 0;    left: 300px;    transform: rotate(-10deg);    -webkit-transform: rotate(-10deg);}.pic5{    bottom: 0;    top:100px;    transform: rotate(-10deg);    -webkit-transform: rotate(-10deg);}.pic6{    left:0px;    top:0px;    transform: rotate(10deg);    -webkit-transform: rotate(10deg);}.pic7{    left:350px;    top:100px;    transform: rotate(20deg);    -webkit-transform: rotate(20deg);}.pic8{    left:100px;    top:200px;    transform: rotate(5deg);    -webkit-transform: rotate(5deg);}.pic9{    left: 550px;    top:90px;    transform: rotate(15deg);    -webkit-transform: rotate(15deg);}

html代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link type="text/css" href="style.css" rel="stylesheet"/>    <title>照片墙</title></head><body>    <div class="container">    <img class="pic pic1" src="image/1.png"/>    <img class="pic pic2" src="image/2.png"/>    <img class="pic pic3" src="image/3.png"/>    <img class="pic pic4" src="image/4.png"/>    <img class="pic pic5" src="image/5.png"/>    <img class="pic pic6" src="image/6.png"/>    <img class="pic pic7" src="image/7.png"/>    <img class="pic pic8" src="image/8.png"/>    <img class="pic pic9" src="image/9.png"/>    </div></body></html>

0 0