Cool Text Hover Effect In CSS Part 3
Cool Text Hover Effect In CSS
/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
background-image: radial-gradient( #D9D9D9, #FFF );
display: grid;
place-items: center;
font-family: sans-serif;
}
.container{
display: grid;
grid: repeat(3, 1fr)/repeat(3, 1fr);
}
.container span{
width: 200px;
height: 200px;
z-index: 0;
}
.container h1{
font-size: 5rem;
color: #FFF;
font-weight: 900;
text-shadow: 0 0 2px rgb(0, 0, 0);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}
.container h1:hover{
text-shadow: 0 0 30px rgb(0, 0, 0);
}
.container span.hover.one:hover~h1{
left: 55%;
top: 55%;
}
.container span.hover.two:hover~h1{
top: 55%;
}
.container span.hover.three:hover~h1{
left: 45%;
top: 55%;
}
.container span.hover.four:hover~h1{
left: 55%;
}
.container span.hover.five:hover~h1{
text-shadow: 0 0 30px rgb(0, 0, 0);
}
.container span.hover.six:hover~h1{
left: 45%;
}
.container span.hover.seven:hover~h1{
left: 55%;
top: 45%;
}
.container span.hover.eight:hover~h1{
top: 45%;
}
.container span.hover.nine:hover~h1{
left: 45%;
top: 45%;
}
Смотрите видео Cool Text Hover Effect In CSS Part 3 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Masters In Web Design 15 Январь 2022. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 8 раз и оно понравилось 2 посетителям.
