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, duration hours minute second in high quality that is uploaded to the channel Masters In Web Design 28 January 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 21 times and liked it 3 visitors.
