Andrew的博客

practice makes perfect

0%

css动画

发表于

CSS动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>fe 21</title>
        <style>
            .b + .b {
                /*background: red;*/
                border-top: 1px solid black;
            }
            .c {
                transform: translate(20px, 40px);
            }
            wujcxy::after {
                content: '★';
                font-size: 32px;
                text-shadow: 1px 1px black;
            }
            .orange {
                color: # FF9800;
            }
            .gray {
                color: lightgray;
            }
        </style>
        <style>
            /* transition 动画 */
            .gua-cube {
                width: 100px;
                height: 200px;
                background: red;
            }
            .gua-cube:hover {
                width: 200px;
                height: 100px;
                background: blue;
                transform: scale(1.2, 2);
            }
            .gua-cube {
                transition: 1s;
            }

            /* animation 动画 */
            .gua-animation div {
                height: 30px;
                background: lightblue;
                margin: 10px 10px;
            }

            /*
            定义一个动画
            改变背景色
            */
            @keyframes changecolor {
                0% {
                    background: lightblue;
                    /*height: 30px;*/
                }
                100% {
                    background: black;
                    height: 100px;
                }
            }
            @keyframes vr {
                0% {
                    transform: rotate(0deg);
                }
                50% {
                    transform: rotate(280deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            /* 播放动画 1s 完成， 动画名是 changecolor */
            .gua1:hover {
                animation: 1s changecolor;
            }
            /* 利用 play-state 属性实现动画暂停 */
            .gua2 {
                animation: 1s vr infinite;
                animation-timing-function: linear;
                animation-play-state: paused;
            }
            .gua2:hover {
                animation-play-state: running;
            }
        </style>
    </head>
    <body>
        <div class="b">
            a
        </div>
        <div class="c">
            c
        </div>
        <div class="b">
            <wujcxy class="orange"></wujcxy>
            <wujcxy class="orange"></wujcxy>
            <wujcxy class="orange"></wujcxy>
            <wujcxy class="gray"></wujcxy>
            <wujcxy class="gray"></wujcxy>
        </div>
        <!-- transition 动画 -->
        <div class="gua-transition">
            <div class="gua-cube">

            </div>
        </div>
        <div class="gua-animation">
            <div class="gua1">1</div>
            <div class="gua2">2</div>
            <div class="gua3">3</div>
        </div>
    </body>
</html>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// ============
// 内容如下
// 1, css3 的新特性
// 2, css3 动画和动态效果
// ============
//

// CSS选择器介绍
// 阮一峰 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

// 1.  4种基本选择器

CSS 2.1

// 2.  4种多元素的 组合选择器
div, p     同时匹配
div h1     匹配后代
div > p    匹配子元素
div + div  匹配同级的下一个元素(仅匹配一个)

其中 div p 与 div > p 的区别
前者匹配全部的后代元素，而后者仅匹配向下一层（子元素）

// 3.  4种属性选择器   根据某类的属性来查找选择器
E[att]
E[att=val]

// 4. 伪类选择器  实际不存在的类
E:first-child
E:link
E:lang(c)

// 5. 伪元素
E::first-line
E::first-letter
E::before





# CSS 3
//


CSS 3 中的新特性
// 应该利用 CSS 3 generator生成CSS3代码(上课会讲)
border-radius 边框圆角
box text shadow 盒子阴影
transform   2D 变形
columns 属性 将文本分隔成多列
transition 动画


keyframes 动画和生成软件
https://daneden.github.io/animate.css/
http://cssanimate.com/


其他 css3 生成软件
http://css3generator.com/
http://www.css3generator.in/
http://css3.me/
https://www.tutorialspoint.com/css/css3_boarder_image.htm


CSS3 动画
主要用到了 3 个属性
transform 的全部函数
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transition 可动画列表
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

animation

动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>fe 21 css3 animation</title>
        <style>
        .gua-block {
            background: lightblue;
            width: 100px;
            height: 100px;
        }
        .gua-spin {
            animation: spin linear 2s;
            animation-iteration-count: 1;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .shake {
            animation: shake linear 0.6s;
            animation-iteration-count: 1;
        }

        @keyframes shake {
            0% {
                transform: translateX(0px);
            }
            10% {
                transform: translateX(-10px);
            }
            30% {
                transform: translateX(10px);
            }
            50% {
                transform: translateX(-10px);
            }
            70% {
                transform: translateX(10px);
            }
            90% {
                transform: translateX(-10px);
            }
            100% {
                transform: translateX(0px);
            }
        }

        .gua-shake {
            transform: translateX(100px);
        }
        </style>
    </head>
    <body>
        <div class="gua-block">
            方块
        </div>
        <button class="play">播放动画</button>

        <div class="gua-shake">
            <input class='input' value="">
            <br>
            <button class="login">登录</button>
        </div>
        <script>
            var e = function(sel) {
                return document.querySelector(sel)
            }

            var playAnimation = function() {
                var block = e('.gua-block')
                // 让它开始播放动画
                block.classList.add('gua-spin')
            }

            var shake = function(element) {
                element.classList.add('shake')
            }

            var __main = function() {
                e('.login').addEventListener('click', function(event) {
                    // if 登录不成功
                    var input = e('.input')
                    shake(input)
                })
                // 绑定一个 animationend 事件, 在动画结束后删除动画 class
                e('.input').addEventListener('animationend', function(){
                    e('.input').classList.remove('shake')
                })


                e('.play').addEventListener('click', function(e) {
                    playAnimation()
                })
                // 绑定一个 animationend 事件, 在动画结束后删除动画 class
                var block = e('.gua-block')
                block.addEventListener('animationend', function(){
                    block.classList.remove('gua-spin')
                })
            }

            __main()
            /*
                animationend 事件
                    在动画播完后触发
                    动画播放被暂停不会触发
                animationiteration 事件
                    在动画播放一轮后触发
                    如果动画只播放一轮, 那么不会触发此事件
                利用事件测试动画
            */
        </script>
    </body>
</html>