רכבת נוסעת

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

סצנת SVG מונפשת · תחבורה · נסיעה · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 110" width="100%" role="img"
     aria-label="רכבת נוסעת">
  <style>
    .tr { animation: tr-go 5s linear infinite }
    .tr-w { animation: tr-spin .55s linear infinite }
    .tr-smoke { animation: tr-up 1.6s ease-out infinite }
    .tr-smoke:nth-of-type(2) { animation-delay: .5s }
    .tr-smoke:nth-of-type(3) { animation-delay: 1s }
    @keyframes tr-go { from { transform: translateX(-130px) } to { transform: translateX(250px) } }
    @keyframes tr-spin { to { transform: rotate(360deg) } }
    @keyframes tr-up { from { transform: translate(0,0) scale(.5); opacity: .8 } to { transform: translate(-24px,-30px) scale(1.6); opacity: 0 } }
  </style>
  <rect width="240" height="110" fill="#0f172a"/>
  <rect y="86" width="240" height="4" fill="#475569"/>
  <rect x="3" y="90" width="8" height="4" fill="#334155"/>
  <rect x="18" y="90" width="8" height="4" fill="#334155"/>
  <rect x="33" y="90" width="8" height="4" fill="#334155"/>
  <rect x="48" y="90" width="8" height="4" fill="#334155"/>
  <rect x="63" y="90" width="8" height="4" fill="#334155"/>
  <rect x="78" y="90" width="8" height="4" fill="#334155"/>
  <rect x="93" y="90" width="8" height="4" fill="#334155"/>
  <rect x="108" y="90" width="8" height="4" fill="#334155"/>
  <rect x="123" y="90" width="8" height="4" fill="#334155"/>
  <rect x="138" y="90" width="8" height="4" fill="#334155"/>
  <rect x="153" y="90" width="8" height="4" fill="#334155"/>
  <rect x="168" y="90" width="8" height="4" fill="#334155"/>
  <rect x="183" y="90" width="8" height="4" fill="#334155"/>
  <rect x="198" y="90" width="8" height="4" fill="#334155"/>
  <rect x="213" y="90" width="8" height="4" fill="#334155"/>
  <rect x="228" y="90" width="8" height="4" fill="#334155"/>
  <g class="tr">
    <g fill="#cbd5e1" opacity=".7">
      <circle class="tr-smoke" cx="96" cy="34" r="6"/>
      <circle class="tr-smoke" cx="96" cy="34" r="6"/>
      <circle class="tr-smoke" cx="96" cy="34" r="6"/>
    </g>
    <rect x="10" y="52" width="52" height="30" rx="3" fill="#4338ca"/>
    <rect x="18" y="58" width="16" height="12" rx="2" fill="#bfdbfe"/>
    <rect x="40" y="58" width="16" height="12" rx="2" fill="#bfdbfe"/>
    <path d="M66 40h34v42H66z" fill="#dc2626"/>
    <rect x="72" y="48" width="18" height="14" rx="2" fill="#fecaca"/>
    <rect x="90" y="26" width="12" height="16" rx="2" fill="#991b1b"/>
    <g class="tr-w" style="transform-origin:24px 84px"><circle cx="24" cy="84" r="7" fill="#0f172a" stroke="#94a3b8" stroke-width="2.4"/><path d="M24 78v12" stroke="#475569" stroke-width="2"/></g>
    <g class="tr-w" style="transform-origin:50px 84px"><circle cx="50" cy="84" r="7" fill="#0f172a" stroke="#94a3b8" stroke-width="2.4"/><path d="M50 78v12" stroke="#475569" stroke-width="2"/></g>
    <g class="tr-w" style="transform-origin:78px 84px"><circle cx="78" cy="84" r="8" fill="#0f172a" stroke="#94a3b8" stroke-width="2.4"/><path d="M78 77v14" stroke="#475569" stroke-width="2"/></g>
  </g>
</svg>

כליקס לא הצליח להיטען

נסו קודם לרענן את העמוד. אם בדיוק עלתה גרסה חדשה, רענון פותר את זה מיד.

אם הרענון לא עזר, ייתכן שהדפדפן ישן מדי: כליקס מריץ את הכלים על המכשיר שלכם ולא בשרת, ולכן הוא זקוק לדפדפן מ-2022 ומעלה. מה עושים: לעדכן את Chrome או את Firefox, ולפתוח שוב את klixtools.com.

רענון העמוד