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>Bell Wiggle Animation</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 font-family: sans-serif;
15 }
16
17 .stage {
18 position: relative;
19 width: 100vw;
20 height: 100vh;
21 background: #ffffff;
22 }
23
24 /* Positioned near top-left like the reference */
25 .bell-wrap {
26 position: absolute;
27 left: 78px;
28 top: 58px;
29 width: 72px;
30 height: 92px;
31 transform-origin: 50% 18%;
32 animation: bellRock 1.15s ease-in-out infinite;
33 }
34
35 .bell {
36 position: absolute;
37 inset: 0;
38 }
39
40 .body {
41 position: absolute;
42 left: 10px;
43 top: 14px;
44 width: 56px;
45 height: 58px;
46 background: #cfcfcf;
47 border-radius: 28px 28px 12px 12px;
48 }
49
50 .rim {
51 position: absolute;
52 left: 4px;
53 top: 56px;
54 width: 68px;
55 height: 12px;
56 background: #c9c9c9;
57 border-radius: 999px;
58 }
59
60 .loop {
61 position: absolute;
62 left: 28px;
63 top: 4px;
64 width: 10px;
65 height: 10px;
66 border: 3px solid #c8c8c8;
67 border-radius: 50%;
68 background: #fff;
69 box-sizing: border-box;
70 }
71
72 .clapper {
73 position: absolute;
74 left: 31px;
75 top: 62px;
76 width: 20px;
77 height: 24px;
78 background: linear-gradient(90deg, #8f8f8f 0%, #bdbdbd 55%, #8f8f8f 100%);
79 border-radius: 0 0 12px 12px;
80 transform-origin: 50% 0%;
81 animation: clapperSwing 1.15s ease-in-out infinite;
82 }
83
84 .eye {
85 position: absolute;
86 top: 34px;
87 width: 5px;
88 height: 5px;
89 background: #9f9f9f;
90 border-radius: 50%;
91 }
92
93 .eye.left { left: 24px; }
94 .eye.right { left: 42px; }
95
96 .mouth {
97 position: absolute;
98 left: 31px;
99 top: 46px;
100 width: 12px;
101 height: 6px;
102 border-radius: 0 0 10px 10px;
103 background: #9f9f9f;
104 }
105
106 .cheek {
107 position: absolute;
108 top: 43px;
109 width: 4px;
110 height: 4px;
111 background: #b8b8b8;
112 border-radius: 50%;
113 opacity: .9;
114 }
115
116 .cheek.left { left: 26px; }
117 .cheek.right { left: 44px; }
118
119 @keyframes bellRock {
120 0%, 100% { transform: rotate(18deg); }
121 25% { transform: rotate(0deg); }
122 50% { transform: rotate(-18deg); }
123 75% { transform: rotate(0deg); }
124 }
125
126 @keyframes clapperSwing {
127 0%, 100% { transform: rotate(-14deg); }
128 25% { transform: rotate(0deg); }
129 50% { transform: rotate(14deg); }
130 75% { transform: rotate(0deg); }
131 }
132</style>
133</head>
134<body>
135 <div class="stage">
136 <div class="bell-wrap">
137 <div class="bell">
138 <div class="loop"></div>
139 <div class="body"></div>
140 <div class="rim"></div>
141 <div class="eye left"></div>
142 <div class="eye right"></div>
143 <div class="cheek left"></div>
144 <div class="cheek right"></div>
145 <div class="mouth"></div>
146 <div class="clapper"></div>
147 </div>
148 </div>
149 </div>
150</body>
151</html>