Как создать: светящийся текст
- Предыдущая страница Текст в тени
- Следующая страница Фиксированная подвал
Узнайте, как использовать CSS для создания светящегося текста.
Как создать светящийся текст
Использование text-shadow
Свойства создания неоновой эффекты, а затем использование анимации с ключевыми кадрами для добавления повторяющегося эффекта свечение:
Пример
.glow { font-size: 80px; color: #fff; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; } to { text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; } }
- Предыдущая страница Текст в тени
- Следующая страница Фиксированная подвал