Card by Javierrocadev

1.container {
2  width: 280px;
3  height: 380px;
4  background-color: #151716;
5  border-radius: 20px;
6  display: flex;
7  flex-direction: column;
8  align-items: center;
9  justify-content: flex-start;
10  filter: hue-rotate(10deg);
11  color: #2fbb39;
12  gap: 20px;
13}
14
15.data {
16  margin-top: 25px;
17  border: 2px solid;
18  padding: 15px;
19  border-radius: 5px;
20  background: #000000;
21}
22
23.data::after {
24  background: #000000;
25  content: "WIND - 54,3";
26  position: absolute;
27  bottom: 5%;
28  right: 5%;
29  border: 2px solid;
30  padding: 3px;
31  border-radius: 5px;
32  font-size: .7em;
33}
34
35.data::before {
36  content: "DEPT - 600";
37  position: absolute;
38  bottom: 5%;
39  left: 5%;
40  border: 2px solid;
41  padding: 3px;
42  border-radius: 5px;
43  font-size: .7em;
44  background: #000000;
45}
46
47.card {
48  width: 200px;
49  height: 200px;
50  background: #000000;
51  border-radius: 50%;
52  position: relative;
53  display: flex;
54  align-items: center;
55  justify-content: center;
56  border: 2px solid #18D322;
57  overflow: hidden;
58}
59
60.card::after {
61  content: "";
62  position: absolute;
63  width: 2px;
64  height: 200px;
65  left: 49%;
66  background-color: #18D322;
67  animation: rotate 3s linear infinite;
68  z-index: 6;
69}
70
71.card::before {
72  content: "";
73  position: absolute;
74  width: 0px;
75  height: 200px;
76  left: 49%;
77  transform: rotate(-4deg);
78  background-color: #18D322;
79  animation: rotate 3s linear infinite;
80  box-shadow: 0 0 10px 10px #2fbb39;
81  z-index: 6;
82}
83
84.circle {
85  width: 100px;
86  height: 100px;
87  border: 2px solid #18D322;
88  border-radius: 50%;
89}
90
91.circle::before {
92  content: "";
93  position: absolute;
94  width: 50px;
95  height: 50px;
96  left: 50%;
97  top: 50%;
98  transform: translate(-50%,-50%);
99  border: 2px solid #18D322;
100  border-radius: 50%;
101}
102
103.circle::after {
104  content: "";
105  position: absolute;
106  width: 150px;
107  height: 150px;
108  left: 50%;
109  top: 50%;
110  transform: translate(-50%,-50%);
111  border: 2px solid #18D322;
112  border-radius: 50%;
113}
114
115.dot {
116  width: 4px;
117  height: 4px;
118  top: 30%;
119  background-color: #18D322;
120  border-radius: 50%;
121  position: absolute;
122  animation: doted 1.5s  ease infinite;
123}
124
125.dot2 {
126  width: 4px;
127  height: 4px;
128  top: 80%;
129  right: 30%;
130  background-color: #18D322;
131  border-radius: 50%;
132  position: absolute;
133  animation: doted 1.5s  1.2s ease infinite;
134}
135
136@keyframes rotate {
137  0% {
138    transform: rotate(0deg);
139  }
140
141  100% {
142    transform: rotate(360deg);
143  }
144}
145
146@keyframes doted {
147  0% {
148    transform: scale(0.95);
149    box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);
150  }
151
152  60% {
153    transform: scale(0.95);
154    box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);
155  }
156
157  100% {
158    transform: scale(1);
159    box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7),0 0 0 0 rgba(24, 211, 33, 0.5),0 0 0 0 rgba(24, 211, 33, 0.3);
160    opacity: 0;
161  }
162}