Fluid Wave Animation
Smooth fluid wave animation using CSS keyframes and transforms
Code
.fluid-wave {
width: 300px;
height: 150px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
}
.fluid-wave::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
top: -250px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.1);
border-radius: 45%;
animation: wave 8s linear infinite;
}
.fluid-wave::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
top: -240px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.05);
border-radius: 40%;
animation: wave 10s linear infinite;
}
@keyframes wave {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="fluid-wave"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>