@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
.
@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.