Hey friends, let's see how to make this cool CSS animation with pure CSS only!
Before diving in, I wanted to mention that this video is made for the #TeamSeas campaign (not sponsored video) initative by MrBeast and a few more people where all creators around the world collaborate today to create awareness on sea pollution.
Team Seas is an organization and for every 1 dollar donated, they will remove 1 pound of trash from the ocean. So do support by donating at least a dollar to teamseas.org
Now back to the tutorial!
This animation is a simple animation made possible with CSS keyframes. So what's this animation about? In the output, a water drops and a wave/puddle wave movement is seen.
This animation repeats continuosly since we set the iteration count as infinite/unlimited/endless. Do watch my video tutorial below for better clarity!
Paste the code below in your HTML file:
<!--Created by CodingPorium,2021. Visit codingporium.blogspot.com or search for CodingPorium on YouTube with no spaces. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Water Drop Animation for TeamSeas | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body {
background-color: #3498DB;
font-family: poppins;
overflow: hidden;
color:white;
}
a{
color:yellow;
}
a:hover{
color:black;
}
div {
margin: 175px auto;
}
.drop {
position: relative;
width: 20px;
height: 20px;
top: -30px;
margin: 0 auto;
background: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-animation-name: drip;
-webkit-animation-name: drip;
animation-name: drip;
-moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
-webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
animation-timing-function: cubic-bezier(1,0,.91,.19);
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.drop:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid rgba(255,255,255,1);
top: -22px;
}
.wave {
position: relative;
opacity: 0;
top: 0;
width: 2px;
height: 1px;
border: #FFF 7px solid;
-moz-border-radius: 300px / 150px;
-webkit-border-radius: 300px / 150px;
border-radius: 300px / 150px;
-moz-animation-name: ripple;
-webkit-animation-name: ripple;
animation-name: ripple;
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.wave:after {
content: "";
position: absolute;
opacity: 0;
top: -5px;
left: -5px;
width: 2px;
height: 1px;
border: #FFF 5px solid;
-moz-border-radius: 300px / 150px;
-webkit-border-radius: 300px / 150px;
border-radius: 300px / 150px;
-moz-animation-name: ripple-2;
-webkit-animation-name: ripple-2;
animation-name: ripple-2;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes ripple {
from {
opacity: 1;
}
to {
width: 600px;
height: 300px;
border-width: 1px;
top: -100px;
opacity: 0;
}
}
@keyframes ripple-2 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
width: 200px;
height: 100px;
border-width: 1px;
top: 100px;
left: 200px;
}
}
@keyframes drip {
to {
top: 190px;
}
}
</style>
<body>
<h1>TeamSeas</h1>
<p>This video is for the TeamSeas initiative by <b>Mr Beast</b> where all <br>
creators post a video about caring for our seas and not polluting them. <br>
Please support this good cause by donating to <a href="https://teamseas.org">teamseas.org</a>.<br>
For every 1 dollar donated, Team Seas will remove 1 pound of trash from the ocean! Donate now<br>
using the link in the description!</p>
<div class="drop"></div>
<div class="wave"></div>
</body>
</html>
And that's all for this post. Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment