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>Animated Circle</title>
7<style>
8 body {
9 margin: 0;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 background-color: black;
15 }
16 .circle {
17 width: 50px;
18 height: 50px;
19 background-color: white;
20 border-radius: 50%;
21 animation: pulse 2s ease-in-out infinite;
22 position: relative;
23 }
24 @keyframes pulse {
25 0%, 100% {
26 transform: scale(1);
27 }
28 50% {
29 transform: scale(1.2);
30 }
31 }
32</style>
33</head>
34<body>
35 <div class="circle"></div>
36</body>
37</html>