Bubble Effect in CSS Part 6
Bubbling text effect in CSS
/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
background: radial-gradient(#333, #222);
font-family: sans-serif;
}
body h1{
font-size: 6rem;
font-weight: 900;
text-transform: uppercase;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #FFF;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}
body span{
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.4);
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
animation: bubbling 5s ease infinite forwards;
}
body span.two{
width: 75px;
height: 75px;
top: 60%;
left: 30%;
animation-delay: 1s;
}
body span.three{
width: 120px;
height: 120px;
top: 40%;
left: 60%;
animation-delay: 2s;
}
body span.four{
width: 50px;
height: 50px;
top: 55%;
left: 80%;
animation-delay: 3s;
}
body span.five{
width: 140px;
height: 140px;
top: 60%;
left: 20%;
animation-delay: 4s;
}
body span.six{
width: 95px;
height: 95px;
top: 45%;
left: 65%;
animation-delay: 5s;
}
@keyframes bubbling{
to{
opacity: 1;
top: -30%;
}
}
Watch video Bubble 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 28 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 21 once and liked it 3 people.