• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Текстовая анимация размытием при помощи CSS (Создание анимации фильтров размытия с помощью CSS)
Текстовая анимация размытием при помощи CSS
Kosten
Дата: Суббота, 2018-12-01, 23:32 | Сообщение 1
Администраторы
Сообщений:18866
Награды: 55


Интересное решение для размещение на сайте такого эффекта, который идет как написанный логотип, так как здесь можно шрифт под знаки установить. Но только вы наведете клик на знаки, то они расплываются, а точнее происходит размытие.

По скорости какое оно будет, здесь вы самостоятельно ставите, но и сам стиль дизайна , который по умолчанию будет. Это при открытие интернет ресурса или страницы, где будет прописан это название.

Изначально так идет:



Это в процессе размытие:



Приступаем к установке:

HTML

Код
<div>
<h1>ZORNET.RU</h1>

</div>


CSS

Код
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Francois One', sans-serif;
    background-color: #dc8011;
    color: #f7f3f3;
}
h1 {
  margin: auto;
  font-size:20vh;
  transition: all 1s;
}
h1:hover {
  filter:blur(6px);
   font-size:20vh;
  letter-spacing: 0.4em;
  transform:scale(1.4);
  opacity:0.07;
}


В стилях закрепил body, если кто будет создавать отдельную страницу, а так на сайте на созданной странице не нужно, так как по умолчанию установлен в стилях CSS.

Демонстрация
Прикрепления: 1308030.png(6.3 Kb) · 4671552.png(36.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Текстовая анимация размытием при помощи CSS (Создание анимации фильтров размытия с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: