HTML5+CSS3实现图片可倾斜摆放的动画相册效果

先看看效果:其中鼠标悬浮在图片上会有动态效果图

 

 

直接上代码:

css文件

 1 @CHARSET "UTF-8";
 2 *{
 3     padding:0px;
 4     margin:0px;
 5 }
 6 div{
 7     font-family:"楷体";
 8     font-size:14px;
 9     color:#666
10 }
11 body
12 {
13     background-image:url("../img/background.jpg") ;
14     background-size:cover;
15     
16 }
17 
18 .container{
19     width:1100px;
20     height:550px;
21     margin:60px auto;
22     position:relative;
23 }
24 .container img{
25     position:absolute;
26     padding:10px 10px 15px;
27     background:#fff;
28     border:1px solid #ddd;
29     -webkit-transition:1s ;
30     -moz-transition:1s ;
31     transition:1s ;
32     z-index:1;
33 }
34 .container img:hover{
35     -webkit-transform:rotate(0deg);
36     -moz-transform:rotate(0deg);
37     transform:rotate(0deg);
38     -webkit-transform:scale(1.1);
39     -moz-transform:scale(1.1);
40     transform:scale(1.1);
41     -webkit-box-shadow:5px 5px 5px #ddd;
42     -moz-box-shadow:5px 5px 5px #ddd;
43     box-shadow:5px 5px 5px #ddd;
44     z-index:2;
45     cursor:pointer;
46 }a
47 .pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}
48 .pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}
49 .pic3{bottom:0;right:0;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
50 .pic4{bottom:0;left:500px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
51 .pic5{bottom:0;left:0;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
52 .pic6{top:0;left:0;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}
53 .pic7{top:0;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
54 .pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
55 .pic9{top:150px;left:580px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}
56 .pic10{left:180px;top:60px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);

Index.html文件:

 1 <html>
 2 <head>
 3 <title>CSS3动画相册 图片可倾斜摆放DEMO演示</title>
 4 <meta http-equiv="Content-Type" content="text/html;chatset=utf-8" />
 5 <link href="css/style1.css" rel="stylesheet" type="text/css" />
 6 </head>
 7 <body>
 8 <div class="container">
 9 <img src="img/mm1.jpg" class="pic1"  />
10     <img src="img/mm2.jpg" class="pic2"  />
11     <img src="img/mm3.jpg" class="pic3"  />
12     <img src="img/mm4.jpg" class="pic4"  />
13     <img src="img/mm5.jpg" class="pic5"  />
14     <img src="img/mm6.jpg" class="pic6"  />
15     <img src="img/mm7.jpg" class="pic7"  />
16     <img src="img/mm8.jpg" class="pic8"  />
17     <img src="img/mm9.jpg" class="pic9"  />
18     <img src="img/mm10.jpg" class="pic10"  />
19 </div>
20 </body>
21 </html>

 需要注意的一些问题:

CSS3 transition 属性

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

 

语法

transition: property duration timing-function delay;

  

值描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

 

　transform: rotate(40deg); /* 其中40是旋转的角度 */

 

transition: width 2s;产生带有平滑改变width的过渡效果,完成过渡效果需要2秒

 

posted @ 2016-01-19 14:09  Steven*  阅读(7024)  评论(0)  编辑  收藏  举报