1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Recreated Animation</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 }
15
16 .scene {
17 position: relative;
18 width: 100vw;
19 height: 100vh;
20 background:
21 linear-gradient(
22 to bottom,
23 #4caf50 0%,
24 #4caf50 32.5%,
25 #ffffff 32.5%,
26 #ffffff 100%
27 );
28 }
29
30 .ring {
31 position: absolute;
32 left: 50%;
33 top: 16.8%;
34 width: 20px;
35 height: 20px;
36 margin-left: -10px;
37 margin-top: -10px;
38 border-radius: 50%;
39 box-sizing: border-box;
40 border: 2px solid rgba(34, 102, 34, 0.55);
41 transform-origin: center;
42 animation: pulse 1.6s ease-in-out infinite;
43 filter: blur(0.15px);
44 }
45
46 @keyframes pulse {
47 0% {
48 transform: scale(0);
49 opacity: 0;
50 border-color: rgba(34, 102, 34, 0.0);
51 }
52 18% {
53 transform: scale(0.45);
54 opacity: 0.35;
55 border-color: rgba(34, 102, 34, 0.28);
56 }
57 32% {
58 transform: scale(0.8);
59 opacity: 0.55;
60 border-color: rgba(34, 102, 34, 0.42);
61 }
62 45% {
63 transform: scale(1);
64 opacity: 0.75;
65 border-color: rgba(34, 102, 34, 0.58);
66 }
67 58% {
68 transform: scale(1.02);
69 opacity: 0.72;
70 border-color: rgba(34, 102, 34, 0.55);
71 }
72 72% {
73 transform: scale(0.72);
74 opacity: 0.28;
75 border-color: rgba(34, 102, 34, 0.22);
76 }
77 100% {
78 transform: scale(0);
79 opacity: 0;
80 border-color: rgba(34, 102, 34, 0.0);
81 }
82 }
83</style>
84</head>
85<body>
86 <div class="scene">
87 <div class="ring"></div>
88 </div>
89</body>
90</html>