Beautiful good night animation by using html and css and svg.
Good night animation by Learn code free online.
our next project is Good night wishing card. I know, nobody places good night wish on their website of-course, but still we can make one for our dear ones. as we always wish them a good night sleep, here our moon is lulling it's beloved star to sleep. this is very simple css animation everybody should learn. let's start to learn it with few codes given below. here we set a box div for falling dust. two div elements for moon and thread, and span element for texts:
<div class="container-fluid">
<div class="box"><div class="dust"></div>
<div class="moon">
<div class="mooneye"></div>
<div class="moonsmile"></div>
</div>
<div class="thread"></div>
<div class="star">
<div class="eyes">
<div class="eye1"></div>
<div class="eye2"></div>
</div>
<div class="smile"></div>
</div>
<p><span class="good">Good</span><br><span class="night">Night</span></p>
</div>
</div>
and here is some javascript code to create dusts falling from the sky. see the below js code:
<script>
setInterval(createdust, 110);
function createdust(){
const dustbox = document.querySelector('.box');
const dust_points = document.createElement('div');
dust_points.classList.add("dust");
dust_points.style.left = Math.random() * innerWidth + 'px';
dust_points.style.animationDuration = Math.random()/1.6*5+3+'s';
dust_points.style.animationDelay ='2s';
dustbox.appendChild(dust_points);
setTimeout(() =>{
dust_points.remove();
},30000);
}
</script>
here is css code for above animation. in this code we have used child divs to style moon and stars eyes and smile. we have used font from google font site. see the below code:
.container-fluid{
width: 100vw;
height: 100vh;
background-color: black;
overflow: hidden;
}
.moon{
position: relative;
top: 50px;
left: 350px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,1)48%, rgba(0,0,0,1)100%);
}
.moon .mooneye{
position: absolute;
z-index: 99999;
top: 100px;
left: 45px;
height: 20px;
width: 35px;
margin: 0 auto;
border-bottom: 8px solid black;
border-radius: 100%;
}
.moon .moonsmile{
position: absolute;
z-index: 99999;
top: 150px;
left: 60px;
height:30px;
width:65px;
margin: 0 auto;
border-bottom: 8px solid black;
border-radius: 100%;
transform: rotateZ(5deg);
}
.moon::before{
position: absolute;
left: 80px;
top: -30px;
content: '';
min-height: 300px;
min-width:300px;
background-color: black;
border-radius: 50%;
}
.thread{
position: relative;
top: -5px;
left: 500px;
width: 2px;
height: 250px;
background-color: white;
}
.star{
position: relative;
top: -72px;
left: 426px;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(255,255,255,1)1%, rgba(0,0,0,1)100%);
clip-path: polygon(50% 0%, 64% 28%, 98% 35%, 73% 55%, 81% 89%, 50% 70%, 19% 90%, 28% 55%, 2% 35%, 38% 29%);
z-index: 1;
animation: swings 3s ease-in-out infinite;
}
@keyframes swings{
0%{
transform: rotateZ(-20deg);
transform-origin: top;
}
50%{
transform: rotateZ(20deg);
transform-origin: top;
}
100%{
transform: rotateZ(-20deg);
transform-origin: top;
}
}
.eyes .eye1{
position: absolute;
z-index: 1;
top: 50px;
left: 35px;
height: 10px;
width: 25px;
margin: 0 auto;
border-bottom: 4px solid rgb(31,24,24);
border-radius: 100%;
}
.eyes .eye2{
position: absolute;
z-index: 1;
top: 50px;
left: 85px;
height: 10px;
width: 25px;
margin: 0 auto;
border-bottom: 4px solid rgb(31,24,24);
border-radius: 100%;
}
.smile{
position: absolute;
z-index: 1;
top: 75px;
left: 60px;
height: 5px;
width: 25px;
margin: 0 auto;
border-radius: 10%;
background-color: rgb(72,72,72);
animation: smilingstar 8s linear infinite;
}
@keyframes smilingstar {
0%{
}
40%{
height: 30px;
width: 30px;
border-radius: 50%;
border-bottom: none;
background-color: rgb(72,72,72);
}
50%{
height:5px;
width:25px;
margin: 0 auto;
border-radius: 30%;
background-color: rgb(72,72,72);
}
}
p .good{
position: absolute;
font-size: 150px;
color: #aaa9ad;
top: 50px;
left: 550px;
font-family: 'Merienda one', cursive;
text-shadow: 0 0 10px white;
}
p .night{
position: absolute;
font-size: 150px;
color: #ffffff;
top: 300px;
left: 650px;
font-family: 'Merienda one', cursive;
text-shadow: 0 0 10px white;
}
.box{
width: 100vw;
height: 100vh;
position: relative;
top: 0px;
left: 0px;
z-index: 2;
overflow: hidden;
}
.dust{
position: absolute;
top: -20px;
height: 35px;
width: 35px;
border-radius: 50%;
background-color: white;
animation: fall linear forwards;
z-index: -1;
display: inline-flex;
background: radial-gradient(circle, rgba(255,255,255,1)1%, rgba(0,0,0,1)20%);
}
@keyframes fall{
to{
transform: translateY(120vh) translateX(500px);
}
}