Для создания эффекта свечения вокруг текста в CSS можно использовать свойство text-shadow.
Синтаксис:
text-shadow: h-shadow v-shadow blur-radius color;
где:
- h-shadow — горизонтальное смещение тени от текста.
- v-shadow — вертикальное смещение тени от текста.
- blur-radius — радиус размытия тени.
- color — цвет тени.
Пример кода:
h1 {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7f7fff, 0 0 70px #7f7fff, 0 0 80px #7f7fff, 0 0 100px #7f7fff, 0 0 150px #7f7fff;
}
В этом примере мы добавили световой эффект вокруг заголовка h1 с помощью свойства text-shadow. У нас есть основной свет с белым цветом и 7 дополнительных световых эффектов с цветом #7f7fff.
Также можно использовать анимации и переходы для эффекта мерцания или появления эффекта. Например:
h1 {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7f7fff, 0 0 70px #7f7fff, 0 0 80px #7f7fff, 0 0 100px #7f7fff, 0 0 150px #7f7fff;
animation: blink .8s linear infinite;
}
@keyframes blink {
0%, 100% {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7f7fff, 0 0 70px #7f7fff, 0 0 80px #7f7fff, 0 0 100px #7f7fff, 0 0 150px #7f7fff;
}
50% {
text-shadow: none;
}
}
Этот код добавляет анимацию blink, которая будет сменять цвет фона на протяжении 0,8 секунды. Основные световые эффекты меняются на none во время анимации, что создает эффект мерцания.
Надеюсь, этот код поможет вам создать световой эффект вокруг текста в CSS. Вы можете использовать различные цвета и значения тени для создания уникальных эффектов.