第四节 css3动画之transition 

 1 <!-- 一般用作活动专题网页制作，平常不太用 -->
 2 <!-- transition-property 设置过渡的属性，例如：width height background-color
 3      transition-duration 设置过渡时间，比如：1s 500ms
 4      transition-timing-function 设置过渡运动的方式，常用有linear(匀速)|ease(缓冲运动)
 5      transition-delay 设置动画延迟
 6      transition:property duration timing-function delay 同时设置四个属性 -->
 7 <!DOCTYPE html>
 8 <html lang="en">
 9 <head>
10     <meta charset="UTF-8">
11     <title>Document</title>
12     <style type="text/css">
13         .box{
14             width: 100px;
15             height: 100px;
16             background-color: gold;
17             /*transition: width 2s ease 0.5s;*/
18             /* 宽度单向运动 */
19             /*transition: width 2s ease,height 1s ease;*/
20             /* 宽高同时运动 */
21             /*transition: width 2s ease 0.5s,height 2s ease ;*/
22             /* 宽延时动，高不延时 */
23             transition: width 2s ease 0.5s,height 2s ease,background-color 2s ease 1s;
24             /* 先变宽高，最后变背景色 */
25             transition: all 2s ease 1s;
26             /* 多个属性同时做相同的动画，可以合并成这一句 */
27         }
28 
29         .box:hover{
30             width: 600px;
31             height:600px;
32             background-color: red;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="box"></div>
38 </body>
39 </html>

 

posted @ 2020-03-14 15:37  kog_maw  阅读(162)  评论(0)    收藏  举报