微信扫一扫打赏支持

html5--6-52 动画效果-过渡

html5--6-52 动画效果-过渡

实例 

 1 @charset="UTF-8";
 2 div{
 3     width: 300px;
 4     height: 150px;
 5     margin: 30px;
 6     font-size: 28px;
 7 
 8 }
 9 
10 /*因为有了hover效果，有了变化（瞬间），所以可以产生过度动画*/
11 #div1{
12     background: red;
13 /*    多少个属性，现在是颜色和宽都可以变化，这里也可以指定width*/
14     transition-property: all;
15 /*    持续时间*/
16     transition-duration: 1s;
17 /*    动画先快后慢这些东西*/
18     transition-timing-function: ease;
19 /*    动画开始的延迟时间*/
20     transition-delay:1s;
21 }
22 #div1:hover{
23     background: green;
24     width: 150px;    
25 }
26 
27 #div2{
28     background: orange;
29     transition-property: width;
30     transition-duration: 1s;
31     transition-timing-function: cubic-bezier(0.2,0.4,0.5,1);
32     transition-delay:1s;
33 }
34 #div2:hover{
35     background: green;
36     width: 150px;    
37 }
38 
39 
40 
41 #div3{
42     background: blue;
43     transition: all 2s ease-in-out 0s;
44 }
45 #div3:hover{
46     background: green;
47     width: 150px;    
48 }
49 
50 
51 #div4{
52     background: rgba(120,60,30,0.8);
53     transition: width 1s ease ,
54                 background 2s linear;
55 }
56 #div4:hover{
57     background: green;
58     width: 150px;    
59 }
60 
61 #div5{
62     background: rgba(20,60,130,0.8);
63     transition: all 1s ease 0.5s;
64 
65 }
66 #div5:hover{
67     background: green;
68     width: 150px;
69     transform: rotate(360deg);
70 }
 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>6-52课堂演示</title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9       <div id="div1">过渡动画1</div>
10       <div id="div2">过渡动画2</div>
11       <div id="div3">过渡动画3</div>
12       <div id="div4">过渡动画4</div>
13       <div id="div5">过渡动画5</div>
14 </body>
15 </html>

 

 

 

学习要点

  • 掌握过渡动画的实现和应用

过渡动画：

  1. 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
  2. CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：把效果添加到哪个 CSS 属性上/规定效果的时长


过渡动画的属性：

    1. transition 简写属性，用于在一个属性中设置四个过渡属性。



    1. transition-property 规定应用过渡的 CSS 属性的名称。
      • none 没有属性会获得过渡效果。
      • all 所有属性都将获得过渡效果。
      • 属性名称

 

    1. transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒

 

    1. transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
      • linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
      • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
      • ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
      • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
      • ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
      • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

  1. transition-delay 规定过渡效果何时开始。默认是 0。

 

posted @ 2017-12-12 03:08  范仁义  阅读(284)  评论(0)  编辑  收藏  举报