📢📢📢 КОД "БЕГУЩАЯ СТРОКА" Друзья, как и обещали, делимся с вами кодом "Бегущая строка" ждем ваши комментарии и реакции 😉 <div class="wowtaplink-scrolltxt"> <div class="wowtaplink-scrolltxtinner wowtaplink-scrolltxtinner--left"> <div class="wowtaplink-scrolltxtitem">🔥 Новый курс уже доступен</div> <div class="wowtaplink-scrolltxtitem">🎉 Присоединяйтесь к WOW-Taplink</div> <div class="wowtaplink-scrolltxtitem">🚀 Продвигай себя с Taplink</div> <div class="wowtaplink-scrolltxtitem">💡 Идеи для твоего нейро-сайта</div> <div class="wowtaplink-scrolltxtitem">✨ Поддержка 24/7</div> <div class="wowtaplink-scrolltxtitem">📲 Уроки в Telegram</div> <div class="wowtaplink-scrolltxtitem">🧠 Консультации по Taplink</div> <div class="wowtaplink-scrolltxtitem">🌈 Дизайн под ключ</div> <!-- Дублируем для бесконечной прокрутки --> <div class="wowtaplink-scrolltxtitem">🔥 Новый курс уже доступен</div> <div class="wowtaplink-scrolltxtitem">🎉 Присоединяйтесь к WOW-Taplink</div> <div class="wowtaplink-scrolltxtitem">🚀 Продвигай себя с Taplink</div> <div class="wowtaplink-scrolltxtitem">💡 Идеи для твоего нейро-сайта</div> <div class="wowtaplink-scrolltxtitem">✨ Поддержка 24/7</div> <div class="wowtaplink-scrolltxtitem">📲 Уроки в Telegram</div> <div class="wowtaplink-scrolltxtitem">🧠 Консультации по Taplink</div> <div class="wowtaplink-scrolltxtitem">🌈 Дизайн под ключ</div> </div> </div> <style> :root { --wowtaplink-lenttxt-bg: #dbeafe; --wowtaplink-lenttxt-speed: 35s; --wowtaplink-lenttxt-ease: linear; --wowtaplink-lenttxt-repeat: infinite; --wowtaplink-lenttxt-gap: 60px; --wowtaplink-lenttxt-rotate: -1deg; --wowtaplink-lenttxt-scale: 1.1; --wowtaplink-lenttxt-btop: 1px solid #ffffff; --wowtaplink-lenttxt-bbottom: 1px solid #ffffff; --wowtaplink-lenttxt-fontfamily: 'Arial', sans-serif; --wowtaplink-lenttxt-fontweight: 600; --wowtaplink-lenttxt-fontsize: 16px; --wowtaplink-lenttxt-fontcolor: #d42525; --wowtaplink-lenttxt-fchover: #3b82f6; } / Контейнер / .wowtaplink-scrolltxt { width: 100vw; overflow: hidden; position: relative; left: 50%; transform: translateX(-50%) rotate(var(--wowtaplink-lenttxt-rotate)); background: var(--wowtaplink-lenttxt-bg); border-top: var(--wowtaplink-lenttxt-btop); border-bottom: var(--wowtaplink-lenttxt-bbottom); padding: 14px 0; cursor: pointer; transition: background 0.3s ease; } / Внутренний трек / .wowtaplink-scrolltxtinner { display: flex; width: fit-content; align-items: center; -webkit-transform-style: preserve-3d; } .wowtaplink-scrolltxtinner--left { animation: wowtaplink-scrolltxt-left var(--wowtaplink-lenttxt-speed) var(--wowtaplink-lenttxt-ease) var(--wowtaplink-lenttxt-repeat); } / Элементы текста / .wowtaplink-scrolltxtitem { font-family: var(--wowtaplink-lenttxt-fontfamily); font-weight: var(--wowtaplink-lenttxt-fontweight); font-size: var(--wowtaplink-lenttxt-fontsize); color: var(--wowtaplink-lenttxt-fontcolor); white-space: nowrap; margin: 0 var(--wowtaplink-lenttxt-gap); transition: transform 0.3s ease, color 0.3s; flex-shrink: 0; } .wowtaplink-scrolltxtitem:hover { transform: scale(var(--wowtaplink-lenttxt-scale)); color: var(--wowtaplink-lenttxt-fchover); } / Пауза при наведении / .wowtaplink-scrolltxt:hover .wowtaplink-scrolltxtinner, .wowtaplink-scrolltxt:active .wowtaplink-scrolltxtinner { animation-play-state: paused; } / Анимация / @keyframes wowtaplink-scrolltxt-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } </style> #коды