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>Wavy Animation</title>
7<style>
8 body {
9 background-color: #333;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .container {
17 width: 300px;
18 height: 300px;
19 background: linear-gradient(to bottom, #ffffff, #f0f8ff);
20 border: 2px solid #e0e0e0;
21 position: relative;
22 overflow: hidden;
23 }
24 .wave {
25 position: absolute;
26 bottom: 0;
27 width: 100%;
28 height: 50px;
29 background: linear-gradient(to bottom, rgba(173, 216, 230, 0.5), rgba(173, 216, 230, 0.8));
30 border-radius: 50px;
31 animation: wave 2s ease-in-out infinite;
32 }
33 @keyframes wave {
34 0% {
35 transform: translateX(0) scaleY(1);
36 }
37 50% {
38 transform: translateX(0) scaleY(1.2);
39 }
40 100% {
41 transform: translateX(0) scaleY(1);
42 }
43 }
44</style>
45</head>
46<body>
47 <div class="container">
48 <div class="wave"></div>
49 </div>
50</body>
51</html>