<style>
/* Класс для неонового текста */
.neon {
  color: #fff; /* цвет текста */
  
  /* Создание неонового свечения с помощью text-shadow */
  text-shadow:
    0 0 5px #0ff,   /* небольшое внутреннее свечение */
    0 0 10px #0ff,  /* среднее свечение вокруг текста */
    0 0 20px #0ff,  /* более широкое свечение */
    0 0 40px #0ff;  /* сильное рассеянное свечение */
  
  font-size: 42px;   /* размер текста */
  background: #000;  /* черный фон, чтобы свечение было заметно */
  padding: 20px;     /* внутренние отступы вокруг текста */
  display: inline-block; /* чтобы фон и паддинг применялись по ширине текста */
}
</style>

<p class="neon">Неоновый текст</p>

<style>
/* Градиентный текст */
.gradient {
  font-size: 42px;        /* размер текста */
  font-weight: bold;      /* жирное начертание */

  /* Градиентный фон под текстом */
  background: linear-gradient(
    45deg,        /* направление градиента под углом 45° */
    #ff0040,      /* первый цвет */
    #0077ff       /* второй цвет */
  );

  /* Обрезаем фон по форме текста */
  -webkit-background-clip: text;

  /* Сам текст делаем прозрачным, чтобы был виден только градиент */
  color: transparent;
}
</style>

<p class="gradient">Градиентный текст</p>

<style>
/* Эффект печатающегося текста */
.typing {
  display: inline-block;        /* Чтобы можно было скрывать ширину */
  white-space: nowrap;          /* Не переносить текст */
  overflow: hidden;             /* Обрезается "не напечатанная" часть */
  
  border-right: 3px solid #000; /* Курсор */
  font-size: 42px;              /* Размер текста */

  /* Основная анимация печати:
     - typing: печать и стирание текста
     - caret: мигающий курсор */
  animation:
    typing 3s steps(var(--chars)) infinite alternate,
    caret 0.6s step-end infinite;
}

/* Анимация печати и стирания */
@keyframes typing {
  from { width: 0; }    /* Начинаем с нулевой ширины */
  to { width: 100%; }   /* Показываем весь текст */
}

/* Мигающий курсор */
@keyframes caret {
  50% { border-color: transparent; }
}
</style>

<p class="typing">Эффект печатной машинки...</p>

<style>
/* Объёмный 3D-текст за счёт многоуровневой тени */
.text3d {
  font-size: 42px;     /* крупный размер шрифта */
  color: #fff;         /* основной цвет текста */

  /* Многоступенчатая тень, создающая эффект 3D-объёма */
  text-shadow: 
    1px 1px 0 #000,    /* первый слой тени */
    2px 2px 0 #000,    /* второй слой для глубины */
    3px 3px 0 #000,    /* третий слой */
    4px 4px 0 #000;    /* четвёртый — максимальный объём */

  background: #333;    /* тёмный фон для контраста */
  padding: 20px;       /* внутренние отступы вокруг текста */
  display: inline-block; /* чтобы фон подстраивался под ширину текста */
}
</style>

<p class="text3d">3D Текст</p>

<style>
/* Эффект обводки текста (outline) */
.outline {
  font-size: 42px;        /* размер текста */

  color: transparent;     /* сам текст прозрачный — видна только обводка */

  /* Обводка вокруг букв (работает во всех WebKit-браузерах и большинстве современных) */
  -webkit-text-stroke: 2px #000; /* толщина и цвет обводки */
}
</style>

<p class="outline">Текст с обводкой</p>

<style>
/* Класс для мигающего текста */
.blink {
  font-size: 42px;              /* размер текста */
  animation: blink 1.2s infinite; /* запуск анимации мигания, повтор бесконечный */
}

/* Ключевые кадры анимации "мигание" */
@keyframes blink {
  0%, 100% { opacity: 1; }  /* текст видим в начале и в конце цикла */
  50% { opacity: 0; }       /* в середине цикла текст пропадает */
}
</style>

<p class="blink">Мерцающий текст</p>

<style>
/* Эффект отражения текста */
.reflection {
  font-size: 42px;    /* Размер текста */
  color: #000;        /* Основной цвет текста */

  /* Создание отражения под текстом (только для WebKit-браузеров)
     - "below 2px" — отражение появляется ниже текста с отступом 2px
     - linear-gradient(...) создаёт плавное исчезновение отражения */
  -webkit-box-reflect: below 2px 
      linear-gradient(transparent, rgba(0,0,0,0.2));
}
</style>

<p class="reflection">Эффект отражения</p>

<style>
/* Анимированный радужный текст */
.rainbow {
  font-size: 42px;              /* Размер текста */
  font-weight: bold;            /* Толщина шрифта для яркости эффекта */

  /* Градиент, который перемещается слева направо */
  background: linear-gradient(
    90deg,                      /* направление — горизонтально */
    red, orange, yellow, green, cyan, blue, violet
  );
  background-size: 400%;        /* увеличенный размер фона для плавного движения */

  -webkit-background-clip: text;/* используем фон как “заливку” текста */
  color: transparent;           /* скрываем реальный цвет текста */

  /* Анимация плавного движения градиента */
  animation: rainbow 15s linear infinite;
}

/* Анимация перемещения радужного градиента */
@keyframes rainbow {
  0%   { background-position: 0%; }    /* стартовое положение градиента */
  100% { background-position: 400%; }  /* градиент полностью проходит по тексту */
}
</style>

<p class="rainbow">Радужная анимация</p>

<style>
/* Класс для текста с плавным появлением и подъёмом */
.slide {
  font-size: 40px;               /* размер текста */
  opacity: 0;                    /* изначально текст невидим */
  transform: translateY(20px);   /* начальное смещение вниз на 20px */
  animation: slide-up 0.8s ease-out forwards; 
  /* slide-up — имя анимации
     0.8s — длительность анимации
     ease-out — плавное замедление в конце
     forwards — сохраняет конечное состояние после завершения */
}

/* Ключевые кадры анимации slide-up */
@keyframes slide-up {
  from {
    opacity: 0;                  /* начало: текст невидим */
    transform: translateY(20px); /* начало: смещён вниз */
  }
  to {
    opacity: 1;                  /* конец: текст видим */
    transform: translateY(0);    /* конец: текст в исходном положении */
  }
}
</style>

<p class="slide">Плавное появление снизу</p>

<style>
/* Класс для текста с эффектом плавного сияния */
.shine {
  font-size: 42px;         /* размер текста */
  background: #000;        /* черный фон, чтобы свечение было заметно */
  padding: 20px;           /* внутренние отступы вокруг текста */
  display: inline-block;   /* чтобы фон и паддинг применялись по ширине текста */
  position: relative;      /* необходимо для ::after */
  overflow: hidden;        /* обрезаем сияние за пределами текста */
  display: inline-block;   /* корректное отображение и позиционирование */
  color: #fff;             /* основной цвет текста */
}

/* Псевдоэлемент для блеска */
.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;               /* стартовая позиция слева за текстом */
  width: 50%;               /* ширина "луча" блеска */
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%, 
    rgba(255,255,255,0.8) 50%, 
    transparent 100%
  );
  filter: blur(5px);        /* размытие для более мягкого свечения */
  animation: shine 2s linear infinite;
}

/* Анимация движения блеска */
@keyframes shine {
  0% {
    left: -75%;
    opacity: 0;             /* начинается невидимым */
  }
  50% {
    opacity: 1;             /* в середине — полностью видно */
  }
  100% {
    left: 125%;             /* проходит через текст полностью */
    opacity: 0;             /* исчезает после прохождения */
  }
}
</style>

<p class="shine">Блестящий текст</p>