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, html {
9 margin: 0;
10 padding: 0;
11 width: 100%;
12 height: 100%;
13 overflow: hidden;
14 background-color: #FFFFFF;
15 }
16 .top-bar {
17 position: absolute;
18 top: 0;
19 left: 0;
20 width: 100%;
21 height: 50px;
22 background-color: #0097A7;
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 }
27 .shape {
28 width: 20px;
29 height: 20px;
30 border-radius: 0;
31 background-color: transparent;
32 border: 2px solid #FFFFFF;
33 }
34 .diamond {
35 transform: rotate(45deg);
36 }
37 .circle {
38 border-radius: 50%;
39 }
40 </style>
41</head>
42<body>
43 <div class="top-bar">
44 <div class="shape diamond" id="diamond"></div>
45 </div>
46 <script>
47 let shape = document.getElementById('diamond');
48 let isDiamond = true;
49 setInterval(() => {
50 if (isDiamond) {
51 shape.style.borderRadius = '50%';
52 shape.style.transform = 'rotate(0deg)';
53 isDiamond = false;
54 } else {
55 shape.style.borderRadius = '0';
56 shape.style.transform = 'rotate(45deg)';
57 isDiamond = true;
58 }
59 }, 1000);
60 </script>
61</body>
62</html>