第四节 css3动画之transition
2021-04-06 17:27
标签：0ms 动画 pre 过渡 idt -- set 这一 har 第四节 css3动画之transition 标签：0ms 动画 pre 过渡 idt -- set 这一 har 原文地址：https://www.cnblogs.com/kogmaw/p/12492433.html 1
2
7 DOCTYPE html>
8 html lang="en">
9 head>
10 meta charset="UTF-8">
11 title>Documenttitle>
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>
上一篇：第十三节 css3动画之翻页动画
下一篇：CSS 文本截断方案