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>Animation</title>
7<style>
8 body {
9 background-color: #f9f9f0;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .container {
17 position: relative;
18 width: 100px;
19 height: 100px;
20 }
21 .dot {
22 width: 10px;
23 height: 10px;
24 border-radius: 50%;
25 background-color: #a0522d;
26 position: absolute;
27 top: 50%;
28 left: 50%;
29 transform: translate(-50%, -50%);
30 animation: pulse 1.5s ease-in-out infinite alternate;
31 }
32 .dot:nth-child(2) {
33 animation-delay: 0.5s;
34 }
35 .dot:nth-child(3) {
36 animation-delay: 1s;
37 }
38 @keyframes pulse {
39 0% {
40 transform: translate(-50%, -50%) scale(1);
41 }
42 50% {
43 transform: translate(-50%, -50%) scale(1.2);
44 }
45 100% {
46 transform: translate(-50%, -50%) scale(1);
47 }
48 }
49</style>
50</head>
51<body>
52<div class="container">
53 <div class="dot"></div>
54 <div class="dot"></div>
55 <div class="dot"></div>
56</div>
57</body>
58</html>