Интересное решение для размещение на сайте такого эффекта, который идет как написанный логотип, так как здесь можно шрифт под знаки установить. Но только вы наведете клик на знаки, то они расплываются, а точнее происходит размытие.
По скорости какое оно будет, здесь вы самостоятельно ставите, но и сам стиль дизайна , который по умолчанию будет. Это при открытие интернет ресурса или страницы, где будет прописан это название.
Изначально так идет:
Это в процессе размытие:
Приступаем к установке:
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.
Демонстрация
