CSS100Day(4)-利用关键帧三圆嵌套动画

1
:root {
2
  --bezier: cubic-bezier(0.21, 0.98, 0.6, 0.99);
3
  --bg-color: #e56262;
4
}
5

6
.frame {
7
  display: grid;
8
  place-content: center;
9
}
10

11
.container {
12
  position: relative;
13
  width: 400px;
14
  height: 400px;
15
  border-radius: 2px;
16
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
17
  background-color: var(--bg-color);
18
}
19

20
.dot-1,
21
.dot-2,
22
.dot-3 {
23
  position: absolute;
24
  top: 50%;
25
  left: 50%;
26
  translate: -50% -50%;
27
  animation-fill-mode: both;
28
  background-color: #fff;
29
  border-radius: 50%;
30
}
31

32
.dot-1 {
33
  width: 30px;
34
  height: 30px;
35
  z-index: 3;
36
  animation: jump1 2s var(--bezier) infinite alternate forwards;
37
}
38

39
.dot-2 {
40
  width: 60px;
41
  height: 60px;
42
  z-index: 2;
43
  animation: jump2 2s var(--bezier) infinite alternate forwards;
44
}
45

46
.dot-3 {
47
  width: 90px;
48
  height: 90px;
49
  z-index: 1;
50
  animation: jump3 2s var(--bezier) infinite alternate forwards;
51
}
52

53
@keyframes jump1 {
54
  0%,
55
  70% {
56
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
57
    scale: 0;
58
  }
59
  100% {
60
    box-shadow: 10px 10px 15px 2px rgba(0, 0, 0, 0.3);
61
    scale: 1;
62
  }
63
}
64

65
@keyframes jump2 {
66
  0%,
67
  40% {
68
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
69
    scale: 0;
70
  }
71
  100% {
72
    box-shadow: 10px 10px 15px 2px rgba(0, 0, 0, 0.3);
73
    scale: 1;
74
  }
75
}
76

77
@keyframes jump3 {
78
  0%,
79
  10% {
80
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
81
    scale: 0;
82
  }
83
  100% {
84
    box-shadow: 10px 10px 15px 2px rgba(0, 0, 0, 0.3);
85
    scale: 1;
86
  }
87
}