Awesome Text Hover Effect Part 1

Опубликовано: 13 Январь 2022
на канале: Masters In Web Design

How to make this type of awesome cool text hover effect in CSS

/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #F1F1F1;
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}
nav.nav{
background: #FFF;
box-shadow: 0 0 16px #D1D1D1;
}
nav.nav ul{
list-style: none;
}
nav.nav ul li{
display: inline-block;
border-right: 1px solid #F1F1F1;
}
nav.nav ul li a{
display: inline-block;
font-family: sans-serif;
font-size: 4rem;
padding: 16px;
text-decoration: none;
color: transparent;
font-weight: 900;
-webkit-text-stroke: 2px #2cdef5;
position: relative;
}
nav.nav ul li:nth-child(1) a::before{
content: attr(data-hover);
position: absolute;
transform: scale(1.4) translate(60px, 60px) rotate(10deg);
color: #2cdef5;
opacity: 0;
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
nav.nav ul li:nth-child(1) a:hover::before{
opacity: 1;
transform: scale(1.0) translate(0, 0) rotate(0);
}
nav.nav ul li:nth-child(2) a{
text-shadow: 50px 0 transparent;
transition: text-shadow 0.4s ease-in-out;
}
nav.nav ul li:nth-child(2) a:hover{
text-shadow: 0 0 0 #2cdef5;
}
nav.nav ul li:nth-child(3) a{
text-shadow: 0 50px transparent;
transition: text-shadow 0.4s ease-in-out;
}
nav.nav ul li:nth-child(3) a:hover{
text-shadow: 0 0 0 #2cdef5;
}

Смотрите видео Awesome Text Hover Effect Part 1 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Masters In Web Design 13 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 21 раз и оно понравилось 2 людям.