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>Soft Wave Card Animation</title>
7<style>
8 :root{
9 --bg:#333333;
10 --card-top:#f4f4f7;
11 --card-bottom:#dfe8f7;
12 --water:#a9c8ee;
13 --size:500px;
14 --radius:6px;
15 --duration:4s;
16 }
17
18 *{box-sizing:border-box}
19 html,body{
20 margin:0;
21 height:100%;
22 background:var(--bg);
23 font-family:system-ui,sans-serif;
24 }
25
26 body{
27 display:grid;
28 place-items:center;
29 }
30
31 .card{
32 width:min(49vw, var(--size));
33 aspect-ratio:1 / 1;
34 position:relative;
35 overflow:hidden;
36 border-radius:var(--radius);
37 background:linear-gradient(to bottom, var(--card-top) 0%, #edf1f8 45%, var(--card-bottom) 100%);
38 }
39
40 .water{
41 position:absolute;
42 inset:auto 0 0 0;
43 height:34%;
44 background:var(--water);
45 animation:rise var(--duration) ease-in-out infinite;
46 will-change:clip-path, height;
47 clip-path:path("M 0 40 C 70 65, 150 60, 240 55 C 330 50, 420 55, 500 38 L 500 170 L 0 170 Z");
48 }
49
50 @keyframes rise{
51 0%,100%{
52 height:23%;
53 clip-path:path("M 0 40 C 70 65, 150 60, 240 55 C 330 50, 420 55, 500 38 L 500 170 L 0 170 Z");
54 }
55 12.5%{
56 height:28%;
57 clip-path:path("M 0 35 C 85 78, 165 72, 255 52 C 340 34, 420 20, 500 0 L 500 170 L 0 170 Z");
58 }
59 25%{
60 height:32%;
61 clip-path:path("M 0 42 C 95 105, 205 108, 300 62 C 380 24, 440 -8, 500 -38 L 500 170 L 0 170 Z");
62 }
63 37.5%{
64 height:36%;
65 clip-path:path("M 0 28 C 105 118, 235 132, 340 92 C 415 62, 462 18, 500 -12 L 500 170 L 0 170 Z");
66 }
67 50%{
68 height:39%;
69 clip-path:path("M 0 18 C 110 132, 255 150, 380 118 C 445 100, 480 62, 500 40 L 500 170 L 0 170 Z");
70 }
71 62.5%{
72 height:34%;
73 clip-path:path("M 0 0 C 95 72, 205 122, 315 126 C 405 128, 462 92, 500 58 L 500 170 L 0 170 Z");
74 }
75 75%{
76 height:29%;
77 clip-path:path("M 0 0 C 120 38, 235 88, 345 98 C 420 104, 470 82, 500 62 L 500 170 L 0 170 Z");
78 }
79 87.5%{
80 height:24%;
81 clip-path:path("M 0 18 C 85 48, 165 52, 255 40 C 345 28, 425 22, 500 0 L 500 170 L 0 170 Z");
82 }
83 }
84
85 /* fallback for browsers without path() clip-path support */
86 @supports not (clip-path: path("M0 0 L1 1")) {
87 .water{
88 left:-10%;
89 width:120%;
90 height:42%;
91 border-radius:45% 55% 0 0 / 22% 28% 0 0;
92 transform-origin:50% 100%;
93 animation:fallbackWave var(--duration) ease-in-out infinite;
94 }
95 @keyframes fallbackWave{
96 0%,100%{ transform:translateY(18%) rotate(0deg); }
97 25%{ transform:translateY(8%) rotate(-7deg); }
98 50%{ transform:translateY(0%) rotate(0deg); }
99 75%{ transform:translateY(10%) rotate(7deg); }
100 }
101 }
102</style>
103</head>
104<body>
105 <div class="card">
106 <div class="water"></div>
107 </div>
108</body>
109</html>