先看看效果:其中鼠標懸浮在圖片上會有動態效果圖
直接上代碼:
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秒