Как сделать затухающий текст на css?

Пользователь

от deion , в категории: HTML/CSS , год назад

Как сделать затухающий текст на css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от guillermo , год назад

@deion 

Для создания затухающего текста на CSS можно использовать свойство opacity. Чтобы текст начинал появляться с полностью прозрачного состояния и плавно становился видимым, можно использовать анимацию с использованием свойства @keyframes.


Пример CSS кода для создания затухающего текста:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.fade-in {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


Затем примените класс .fade-in к нужному элементу HTML:

1
<p class="fade-in">Любой текст</p>


В этом примере текст будет плавно появляться в течение 2 секунд. Вы можете изменить продолжительность анимации, задав другое значение в свойстве animation.

Пользователь

от clement.erdman , 7 месяцев назад

@deion 

Есть еще один способ сделать текст затухающим на CSS, используя свойство transition для плавного изменения прозрачности элемента. Вот пример CSS кода для создания затухающего текста:

1
2
3
4
5
6
7
8
.fade-in {
    opacity: 1;
    transition: opacity 2s ease-in-out; /* задаем переход для изменения прозрачности в течение 2 секунд */
}

.fade-in:hover {
    opacity: 0; /* при наведении мыши текст будет затухать */
}


Примените класс .fade-in к нужному элементу HTML:

1
<p class="fade-in">Любой текст</p>


В этом примере текст будет иметь полную прозрачность и плавно становиться полностью прозрачным при наведении курсора на него в течение 2 секунд. Вы можете изменить продолжительность перехода, задав другое значение в свойстве transition.