Heart eyes smiley animation by Learn code free online.
Smiling Face with Heart-Shaped Eyes smiley falling animation to express feelings of love and infatuation. this type of animations we used as background. smileys are most used expression tool in all over social media. so now we are making a background animation for heart-shaped eyes smiley. you can make any type of smiley with this trick. we are using Javascript code to make them continuously fall. we are using green background for this animation so that we can make it transperent any time with any video editor. so let's start.. see the below html code:
<body>
<div class="box">
<div class="smile">
<div class="mouth">
</div>
</div>
</div>
</body>
here is javascript code for falling smiley animation. see the below code:
<script>
setInterval(createSnowFlake, 110);
function createSnowFlake(){
const snowbox = document.querySelector(".box");
const snow_flake = document.createElement('div');
snow_flake.classList.add("smile");
const snow_flake1 = document.createElement('i');
snow_flake1.classList.add("fa");
snow_flake1.classList.add("fa-heart");
snow_flake.appendChild(snow_flake1);
const snow_flake2 = document.createElement('i');
snow_flake2.classList.add("fa");
snow_flake2.classList.add("fa-heart");
snow_flake.appendChild(snow_flake2);
const snow_flake3 = document.createElement('div');
snow_flake3.classList.add("mouth");
snow_flake.appendChild(snow_flake3);
snow_flake.style.left = Math.random() * innerWidth + 'px';
snow_flake.style.animationDuration = Math.random()/1.3 * 2 + 3 +'s';
snow_flake.style.animationDelay = "2s";
snowbox.appendChild(snow_flake, snow_flake1, snow_flake2, snow_flake3);
setTimeout(() =>{
snow_flake.remove();
},30000);
}
</script>
here is css code for above animation:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
.box{
width:100vw;
height: 100vh;
position: relative;
top: 0;
left: 0;
overflow: hidden;
animation-fill-mode: forwards;
display:table;
background-color: rgb(0, 0, 0);
padding: 50px;
}
.box .smile{
display: inline-flex;
animation:fall linear forwards;
width:100px;
height: 100px;
border-radius:50%;
box-shadow:inset -25px -25px 40px rgba(0,0,0,.5), rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
background-color: yellow;
color: #000;
position:absolute;
top: -120px;
z-index: 99999;
}
.smile span{
position:absolute;
width: 25px;
height: 25px;
clip-path: ellipse(18% 40% at 50% 50%);
background-color: rgb(25, 32, 38);
}
span.eye1{
position:absolute;
top: 30px;
left: 20px;
}
span.eye2{
position:absolute;
top: 30px;
left: 50px;
}
.mouth {
position:absolute;
z-index: 1;
top: 25px;
left: 18px;
height: 60px;
width: 65px;
margin: 0 auto;
border-bottom: 8px solid rgb(31, 24, 24);
border-radius: 100%;
}
@keyframes fall{
to{
transform: translateY(120vh);
}
}
.smile .fa-heart:nth-child(1){
color: rgb(188, 38, 80);
font-size: 30px;
}
.smile .fa-heart:nth-child(2){
color: rgb(188, 38, 80);
font-size: 30px;
}
.smile .fa-heart:nth-child(1){
position:absolute;
top: 20px;
left: 10px;
}
.smile .fa-heart:nth-child(2){
position:absolute;
top: 20px;
left: 60px;
}
Copyright2022 Learn code free online. All Rights Reserved.