CSS animation动画效果实现精灵图、雪碧图动画，多动画应用


CSS animation动画效果实现精灵图、雪碧图动画，多动画应用

素材下载
特朗普

  1. 分析图片动画过程

    分析图片动画过程

  2. 图片可以分成4*6=24 小图片也就是24帧

    • 方法1 可以把每一行成一个动画，所以可以拆分4个动画
    • 方法2 独立写成一个动画
      • 动画一共24帧 100/24≈4
      • 每4%作为一帧

方法1

页面主要框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特朗普动画</title>
    </head>

<body>
    <div>


    </div>
    <h2>
        hover执行
    </h2>
    <div class="box"></div>
</body>

</html

图解图片每个帧的background-position属性，图片的分辨率为600*400

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
 <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px red solid;
            background-image: url("./images/trump_run.png");
            /* 设置背景不重复方便调节 */
            background-repeat: no-repeat;
            /* 多动画使用,隔开      
            run2 2s 2s steps(5)
            run2规定需要绑定到选择器的 keyframe 名称,
            2s规定完成动画所花费的时间,
            2s规定在动画开始之前的延迟,
            steps(5)规定动画的步数。 */            
            animation: run 2s steps(5), run2 2s 2s steps(5), run3 2s 4s steps(5), run4 2s 6s steps(5);
            animation-iteration-count: infinite, infinite, infinite, infinite;

        }
    //第一行动画
        @keyframes run {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -500px 0;
            }

        }
//第二行动画
        @keyframes run2 {

            from {
                background-position: 0px -100px;
            }

            to {
                background-position: -500px -100px;
            }

        }
    //第三行动画
        @keyframes run3 {

            from {
                background-position: -0px -200px;
            }

            to {
                background-position: -500px -200px;
            }

        }
    //第四行动画
        @keyframes run4 {

            from {
                background-position: -0px -300px;
            }

            to {
                background-position: -500px -300px;
            }

        }

        .box {
            animation-play-state: paused;
        }

        .box:hover {
        //鼠标经过执行动画
            animation-play-state: running;
        }
    </style>

效果

方法2

将图片拆分24帧,并写上对应background-position,写完应用动画就行了

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
@keyframes identifier {
1*4%{background-position: }
2*4%    .
3*4%    .
4*4%    .
5*4%    .
6*4%    .
7*4%
8*4%    .
9*4%
10*4%
11*4%   .
12*4%
13*4%
14*4%   .
15*4%
16*4%
17*4%
18*4%   .
19*4%
20*4%
21*4%   .
22*4%
23*4%   .
24*4%{background-position: }
}