מנהרה

כל טבעת מתחילה עמוק ונעה אלינו. ההשהיות יוצרות את תחושת התנועה המתמשכת. מנהרה הוא סצנת SVG מונפשת מתוך סצנות מונפשות של כליקס. מה שמורידים הוא קובץ SVG שההנפשה שלו כתובה בתוכו, ולכן הוא עובד גם כתגית img. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים ברקע, תלת-מימד ותלת-מימד. באותה סדרה יש גם גלי ים, זריחה מעל הים וקו רקיע.

סצנת SVG מונפשת · רקע · תלת-מימד · תלת-מימד

.klix-s-tunnel { perspective: 420px; width: 10rem; height: 8rem; position: relative;
  overflow: hidden; border-radius: 1rem; background: #020617 }
.klix-s-tunnel span { position: absolute; inset: 25%; border: 2px solid #38bdf8; border-radius: .6rem;
  animation: klix-s-tunnel 3s linear infinite }
.klix-s-tunnel span:nth-child(2) { animation-delay: .6s }
.klix-s-tunnel span:nth-child(3) { animation-delay: 1.2s }
.klix-s-tunnel span:nth-child(4) { animation-delay: 1.8s }
.klix-s-tunnel span:nth-child(5) { animation-delay: 2.4s }
@keyframes klix-s-tunnel { from { transform: translateZ(-900px); opacity: 0 }
  25% { opacity: 1 } to { transform: translateZ(320px); opacity: 0 } }