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 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: #f0f0f0;
14 overflow: hidden;
15 }
16 .container {
17 display: grid;
18 grid-template-columns: repeat(3, 40px);
19 grid-template-rows: repeat(3, 40px);
20 gap: 10px;
21 width: 120px;
22 height: 120px;
23 position: relative;
24 }
25 .dot {
26 width: 40px;
27 height: 40px;
28 border-radius: 4px;
29 background-color: #777;
30 position: absolute;
31 transition: all 0.3s ease;
32 }
33 .dot:nth-child(1) { top: 0; left: 0; }
34 .dot:nth-child(2) { top: 0; left: 40px; }
35 .dot:nth-child(3) { top: 0; left: 80px; }
36 .dot:nth-child(4) { top: 40px; left: 0; }
37 .dot:nth-child(5) { top: 40px; left: 40px; }
38 .dot:nth-child(6) { top: 40px; left: 80px; }
39 .dot:nth-child(7) { top: 80px; left: 0; }
40 .dot:nth-child(8) { top: 80px; left: 40px; }
41 .dot:nth-child(9) { top: 80px; left: 80px; }
42 .dot:hover {
43 background-color: #ccc;
44 }
45 .dot:nth-child(5) {
46 animation: pulse 1.5s ease-in-out infinite alternate;
47 animation-delay: 0.2s;
48 }
49 @keyframes pulse {
50 0% { transform: scale(1); }
51 100% { transform: scale(1.2); }
52 }
53 .dot:nth-child(1) {
54 animation: move 1.5s ease-in-out infinite alternate;
55 animation-delay: 0.1s;
56 }
57 .dot:nth-child(2) {
58 animation: move 1.5s ease-in-out infinite alternate;
59 animation-delay: 0.2s;
60 }
61 .dot:nth-child(3) {
62 animation: move 1.5s ease-in-out infinite alternate;
63 animation-delay: 0.3s;
64 }
65 .dot:nth-child(4) {
66 animation: move 1.5s ease-in-out infinite alternate;
67 animation-delay: 0.4s;
68 }
69 .dot:nth-child(6) {
70 animation: move 1.5s ease-in-out infinite alternate;
71 animation-delay: 0.5s;
72 }
73 .dot:nth-child(7) {
74 animation: move 1.5s ease-in-out infinite alternate;
75 animation-delay: 0.6s;
76 }
77 .dot:nth-child(8) {
78 animation: move 1.5s ease-in-out infinite alternate;
79 animation-delay: 0.7s;
80 }
81 .dot:nth-child(9) {
82 animation: move 1.5s ease-in-out infinite alternate;
83 animation-delay: 0.8s;
84 }
85 @keyframes move {
86 0% { transform: translate(0, 0); }
87 100% { transform: translate(10px, 10px); }
88 }
89 </style>
90</head>
91<body>
92 <div class="container">
93 <div class="dot"></div>
94 <div class="dot"></div>
95 <div class="dot"></div>
96 <div class="dot"></div>
97 <div class="dot"></div>
98 <div class="dot"></div>
99 <div class="dot"></div>
100 <div class="dot"></div>
101 <div class="dot"></div>
102 </div>
103</body>
104</html>