Text Wave Effect in CSS part 6
Text wave effect in CSS
/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
width: 100%;
min-height: 100vh;
background: radial-gradient(#D9D9D9, #FFF);
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 580px;
height: 300px;
transform: translateY(-150px);
position: relative;
}
.container span{
font-size: 5rem;
font-weight: 900;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
background: #2cdef5;
width: 12%;
height: 80px;
position: absolute;
bottom: 0;
line-height: 100%;
text-align: center;
color: #FFF;
transition: height 0.4s ease;
}
.container span:nth-child(1){
left: 0;
}
.container span:nth-child(2){
left: 4rem;
}
.container span:nth-child(3){
left: 8rem;
}
.container span:nth-child(4){
left: 12rem;
}
.container span:nth-child(5){
left: 16rem;
}
.container span:nth-child(6){
left: 20rem;
}
.container span:nth-child(7){
left: 24rem;
}
.container:hover span{
height: 100%;
}
.container span:nth-child(even){
transition-delay: 0.1s;
}
Watch video Text Wave Effect in CSS part 6 online without registration, duration hours minute second in high quality. This video was added by user Masters In Web Design 18 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 12 once and liked it 3 people.