先看看效果:其中鼠标悬浮在图片上会有动态效果图
直接上代码:
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
{
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秒