גל בתחתית

גל בתחתית הוא אנימציית CSS מתוך אנימציות של כליקס. מה שמורידים הוא בלוק keyframes ומחלקה אחת שמפעילה אותו. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

אנימציית CSS · רקע · לולאה

/* גל בתחתית */
@keyframes klix-wave-bottom { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
.klix-wave-bottom {
  position: relative; overflow: hidden;
}
.klix-wave-bottom::after {
  content: ""; position: absolute; bottom: -6px; left: 0; width: 200%; height: 40%;
  background: radial-gradient(circle at 25% 0, transparent 60%, #0ea5e9 61%) 0 0 / 25% 100% repeat-x;
  animation: klix-wave-bottom 4s linear infinite;
}