» »

Эффект разрыва текста CSS при наведении

Эффект разрыва текста CSS при наведении
В этой статье узнаете, как можно самостоятельно создать эффект разрыва текста, что происходит при наведении, где задействуем чистый CSS и HTML. Этот отличное решение, которое по своим функциям отлично смотрится, где пригодится веб разработчикам или станет полезен для веб-дизайнера. Так как его не сложно реализовать на любом типе веб-сайта, не говоря какой тематической группе он относится.

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

Так видим при открытие страницы:

Красивый эффект с текстом на сайте

Навели на элемент курсор:

Анимация для текста на чистом CSS

HTML

Код
<h1 name="ZORNET.RU">ZORNET.RU</h1>

CSS

Код
h1 {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0);
  font-size: 53px;
}
h1:before, h1:after {
  content: attr(name);
  color: #06bfeb;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: .2s;
}
h1:before {
  -webkit-clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
  clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
}
h1:after {
  -webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
}
h1:hover:before {
  top: -7px;
  left: -15px;
  transform: rotate(-7deg);
}
h1:hover:after {
  top: 7px;
  left: 15px;
  transform: rotate(7deg);
}

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

Демонстрация
2019-09-16 Загрузок: 1 Просмотров: 298 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar