Светящийся текст с помощью CSS
HTML
<Цифра> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> <h1> Светящийся текст </ h1> </ Цифра>
CSS
@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); }