26-12-2017, 12:51

Admin

0

  Оформление текста

Светящийся текст с помощью CSS

HTML

<Цифра>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
        <h1> Светящийся текст </ h1>
</ Цифра>

@import url (http://fonts.googleapis.com/css?family=Concert+One);
h1 {
  анимация: свечение 10s легкость в бесконечности;
/ * Для менее запаздывающего эффекта, раскомментируйте это:
  анимация: нет;
  -webkit-text-stroke: 1px #fff; 
=========== * *
}
* {box-size: border-box; }
body {
  фон: # 0a0a0a;
  переполнение: скрытый;
  выравнивания текста: центр;
}
фигура {
  анимация: колебание 5s легкость в бесконечности;
  transform-origin: центр центра;
  спектрально-стиль: сохранить-3d;
}
@keyframes wobble {
  0%, 100% {transform: rotate3d (1,1,0,40deg); }
  25% {transform: rotate3d (-1,1,0,40deg); }
  50% {transform: rotate3d (-1, -1,0,40deg); }
  75% {transform: rotate3d (1, -1,0,40deg); }
}
h1 {
  Дисплей: блок;
  ширина: 100%;
  обивка: 40px;
  высота строки: 1,5;
  font: 900 8em 'Concert One', sans-serif;
  текст-преобразования: заглавные буквы;
  позиция: абсолютная;
  цвет: # 0a0a0a;
}
@keyframes glow {
  0%, 100% {text-shadow: 0 0 30px красный; }
  25% {text-shadow: 0 0 30px оранжевый; }
  50% {text-shadow: 0 0 30px forestgreen; }
  75% {text-shadow: 0 0 30px cyan; }
}
h1: nth-child (2) {transform: translateZ (5px); }
h1: nth-child (3) {transform: translateZ (10px);}
h1: nth-child (4) {transform: translateZ (15px); }
h1: nth-child (5) {transform: translateZ (20px); }
h1: nth-child (6) {transform: translateZ (25px); }
h1: nth-child (7) {transform: translateZ (30px); }
h1: nth-child (8) {transform: translateZ (35px); }
h1: nth-child (9) {transform: translateZ (40px); }
h1: nth-child (10) {transform: translateZ (45px); }