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 .box {
9 position: relative;
10 width: 200px;
11 height: 300px;
12 background-color: #fff;
13 border: 1px solid #ddd;
14 }
15 .water {
16 position: absolute;
17 bottom: 0;
18 left: 0;
19 width: 100%;
20 height: 50px;
21 background-color: #87CEEB;
22 border-radius: 10px 10px 0 0;
23 }
24 @keyframes wave {
25 0% {
26 transform: translateY(0);
27 border-radius: 10px 10px 0 0;
28 }
29 50% {
30 transform: translateY(-5px);
31 border-radius: 15px 15px 0 0;
32 }
33 100% {
34 transform: translateY(0);
35 border-radius: 10px 10px 0 0;
36 }
37 }
38 .animate {
39 animation: wave 3s infinite ease-in-out;
40 }
41 </style>
42</head>
43<body>
44 <div class="box">
45 <div class="water animate"></div>
46 </div>
47</body>
48</html>