CSS100Day(21)-利用svg线段实现吃小球动画

1
:root {
2
    --radius: 50;
3
}
4

5
.frame {
6
    position: relative;
7
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
8
    border-radius: 2px;
9
    width: 400px;
10
    height: 400px;
11
    overflow: hidden;
12
    background: #2c2e2e;
13
}
14

15
.pacman {
16
    position: absolute;
17
    width: 100px;
18
    height: 100px;
19
    top: 150px;
20
    left: 150px;
21
    fill: none;
22
    stroke: #f4d146;
23
    stroke-width: 50px; /* 线段宽度就是圆半径 */
24
    stroke-dasharray: calc(50 * 3.14px); /* 间隔就是整个周长，后续可以实现张嘴 */
25
    animation: mouth 0.7s ease-in-out infinite;
26
}
27

28
.eye {
29
    position: absolute;
30
    fill: #2c2e2e;
31
    width: 12px;
32
    height: 12px;
33
    top: 167px;
34
    left: 204px;
35
    animation: eye 0.7s ease-in-out infinite;
36
}
37

38
.dots {
39
    position: absolute;
40
    height: 14px;
41
    width: 240px;
42
    top: 193px;
43
    left: 180px;
44
    stroke: #f4d146;
45
    stroke-width: 14px; /* 实线线帽的半径 */
46
    stroke-dasharray: 0px 50px; /* 实线为0，所以看不到 */
47
    stroke-dashoffset: 14;
48
    stroke-linecap: round; /* 每个实线的线帽子为圆，这样就可以显示间隔显示圆 */
49
    animation: points 0.7s linear infinite;
50
}
51

52
@keyframes mouth {
53
    0%,
54
    100% {
55
        stroke-dashoffset: 0;
56
        rotate: 0deg;
57
    }
58
    50% {
59
        stroke-dashoffset: calc(50 * 3.14px / 4);
60
        rotate: 45deg;
61
    }
62
}
63

64
@keyframes eye {
65
    0%,
66
    100% {
67
        translate: 0 0;
68
    }
69
    50% {
70
        translate: -6px -3px;
71
    }
72
}
73

74
@keyframes points {
75
    0% {
76
        stroke-dashoffset: 14;
77
        transform: translate3d(0, 0, 0);
78
    }
79
    100% {
80
        stroke-dashoffset: 64;
81
    }
82
}