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: #03055B;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 overflow: hidden;
16 }
17 .drop {
18 width: 100px;
19 height: 100px;
20 background-color: white;
21 border-radius: 50px 50px 0 0;
22 animation: drop 2s ease-out;
23 }
24 .drop-wave {
25 width: 100px;
26 height: 100px;
27 background-color: white;
28 border-radius: 50px 50px 0 0;
29 position: relative;
30 }
31 .drop-wave::after {
32 content: "";
33 position: absolute;
34 bottom: 0;
35 left: 50%;
36 transform: translateX(-50%);
37 width: 120px;
38 height: 10px;
39 border-radius: 50%;
40 background-color: white;
41 animation: wave 2s ease-out;
42 }
43 @keyframes drop {
44 0% {
45 transform: translateY(0);
46 }
47 100% {
48 transform: translateY(100px);
49 }
50 }
51 @keyframes wave {
52 0% {
53 width: 0;
54 }
55 100% {
56 width: 120px;
57 }
58 }
59 .text-box {
60 width: 400px;
61 height: 200px;
62 background-color: white;
63 border-radius: 10px;
64 display: flex;
65 justify-content: center;
66 align-items: center;
67 flex-direction: column;
68 font-size: 24px;
69 color: #03055B;
70 }
71 </style>
72</head>
73<body>
74 <div class="drop"></div>
75 <script>
76 // No JavaScript needed for this animation
77 </script>
78</body>
79</html>