Шаблон:Звёзды/styles.css: различия между версиями

Материал из Поле цифровой дидактики
Новая страница: «.stars-wrap { position: relative; overflow: hidden; } .stars-wrap .star { position: absolute; font-size: 22px; line-height: 1; pointer-events: none; animation: twinkle 2.6s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } } /* на телефоне звёзды прячем, чтобы не наезжали на те...»
 
мНет описания правки
 
Строка 1: Строка 1:
.stars-wrap {
<span style="display:inline-block; margin:4px; padding:6px 14px; border-radius:999px; background:#fff; border:1px solid #dcdcf7; box-shadow:0 2px 6px rgba(84,85,246,.1);">🌟 [[{{{1}}}|{{PAGENAME:{{{1}}}}}]]</span>
  position: relative;
  overflow: hidden;
}
.stars-wrap .star {
  position: absolute;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.2) rotate(20deg); }
}
/* на телефоне звёзды прячем, чтобы не наезжали на текст */
@media (max-width: 600px) {
  .stars-wrap .star { display: none; }
  .stars-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}
/* для тех, у кого в системе отключена анимация */
@media (prefers-reduced-motion: reduce) {
  .stars-wrap .star { animation: none; opacity: 0.6; }
}

Текущая версия от 21:39, 12 ноября 2026

🌟 [[{{{1}}}|]]