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