Awesome Text Hover Effect part 9

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

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

/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
background: radial-gradient(#D9D9D9, #FFF);
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}
.container{
width: 540px;
}
.container span{
font-size: 5rem;
font-weight: 900;
color: #FFF;
text-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
display: inline-block;
transition: transform 0.4s ease-in-out;
}
.container:hover span:nth-child(1){
transform: translateY(20px) rotate(20deg);
}
.container:hover span:nth-child(2){
transform: translateY(-20px) rotate(-10deg);
}
.container:hover span:nth-child(3){
transform: translateY(20px) rotate(-20deg);
}
.container:hover span:nth-child(4){
transform: translateY(-20px) rotate(12deg);
}
.container:hover span:nth-child(5){
transform: translateY(20px) rotate(-15deg);
}
.container:hover span:nth-child(6){
transform: translateY(-20px) rotate(5deg);
}
.container:hover span:nth-child(7){
transform: translateY(20px) rotate(-5deg);
}

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

25,125

416