Анимированный неоновый текст на CSS
На это уроке мы рассмотрим эффект, когда при движении курсора плавно появляется и исчезает текст.
Создание и стилизация текста
<div class="box">
...
<h2>Neon Text</h2>
</div>
@import url('https://fonts.googleapis.com/css2?family=Monseratt:wght@600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Monseratt', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
overflow: hidden;
}
.box{
position: relative;/*относительное позиционирование*/
width: 600px;/*ширина контейнера для текста*/
height: 300px;/*высота контейнера*/
display: flex;/*отображать как гибкий контейнер*/
justify-content: center;/*в центре по горизонтали*/
align-items: center;/*в центре по вертикали*/
}
.box h2{
color: #fff;/*цвет текста*/
font-size: 5em;/*размер шрифта*/
font-weight: 600;/*толщина шрифта*/
letter-spacing: 0.1em;/*межбуквенное пространство*/
text-shadow: 0 0 10px #00b3ff,/*неоновый эффект*/
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff;
}
Создание и стилизация неонового курсора
<div class="box">
<div class="lightbar"></div>
...
<h2>Neon Text</h2>
</div>
.lightbar{
position: absolute;/*абсолютное позиционирование */
top: 0;
left: 0;
width: 10px;/*ширина курсора*/
height: 100%;/*высота курсора*/
border-radius: 10px;/*закругления*/
background: #fff;/*цвет курсора*/
z-index: 2;/*порядок слоя*/
box-shadow: 0 0 10px #00b3ff,/*неоновый эффект*/
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff;
animation: animatelightbar 5s linear infinite;/*свойства анимации*/
}
Анимирование курсора
Курсор плавно появляется и двигается туда-сюда по тексту. Это еще не то, что нам нужно.
@keyframes animatelightbar{
0%,5%
{
transform: scaleY(0) translateX(0);
}
10%
{
transform: scaleY(1) translateX(0);
}
90%
{
transform: scaleY(1) translateX(calc(600px - 10px));
}
95%,100%
{
transform: scaleY(0) translateX(calc(600px - 10px));
}
}
Создание верхнего слоя
Теперь верхний слой сверху поверхности текста и курсор двигается по нему.
<div class="box">
<div class="lightbar"></div>
<div class="topLayer"></div>
<h2>Neon Text</h2>
</div>
.topLayer{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
animation: animatetopLayer 10s linear infinite;
}
Анимация верхнего слоя
Создадим анимацию, чтобы курсор двигался вместе с верхним слоем, создавая магический эффект - появления и стирания текста.
@keyframes animatetopLayer{
0%,2.5%
{
transform: translateX(0);
}
5%
{
transform: translateX(0);
}
45%
{
transform: translateX(100%);
}
47.5%,50%
{
transform: translateX(100%);
}
50.001%,52.5%
{
transform: translateX(-100%);
}
55%
{
transform: translateX(-100%);
}
95%
{
transform: translateX(0%);
}
97.5%,100%
{
transform: translateX(0%);
}
}
Посмотрите пример на CodePen
-
Создано 08.11.2021 10:15:46
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.