CSS Cloth Simulation
Physics-based cloth simulation effect with wave animations
Code
.cloth-container {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.cloth-strip {
position: absolute;
width: 100%;
height: 20px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(5px);
border-radius: 10px;
animation: cloth-wave 3s ease-in-out infinite;
}
.cloth-strip:nth-child(1) { top: 20%; animation-delay: 0s; }
.cloth-strip:nth-child(2) { top: 35%; animation-delay: 0.2s; }
.cloth-strip:nth-child(3) { top: 50%; animation-delay: 0.4s; }
.cloth-strip:nth-child(4) { top: 65%; animation-delay: 0.6s; }
.cloth-strip:nth-child(5) { top: 80%; animation-delay: 0.8s; }
@keyframes cloth-wave {
0%, 100% { transform: translateX(0) scaleX(1); }
25% { transform: translateX(-15px) scaleX(1.05); }
50% { transform: translateX(0) scaleX(1); }
75% { transform: translateX(15px) scaleX(1.05); }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cloth-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cloth-strip"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cloth-strip"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cloth-strip"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cloth-strip"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cloth-strip"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>