CSS Emoji Background Animation

css background animation

Hello and welcome to our website. Today we are going to create a background animation with emojis. You can check out the other types of background animations we created earlier on this website. As you know, background animation can be a powerful tool to add visual interest to any website. It also helps to enhance the user experience of any website. Before getting the source code of this snippet, watch the video tutorial provided below. It will help you understand the code. If you like our content you can subscribe to our YouTube Channel as well.

Background Animation Video Tutorial:

I hope you have seen the video tutorial. Though background animations are often used to enhance the visual interest of any website, we need to use them carefully so that it doesn't disrupt the user experience. For that, we have to keep the animation as simple as we can. In this snippet, we have used some HTML emoji icons to create the background animation. The emojis appear all the way from the bottom of the screen to the top and then fade away. We have used only HTML and CSS to create this animation. First, we arranged icons and put them in separate span tags. Later we gave position fixed to all the spans and positioned them in different places using the left property. We also gave each of them a separate animation-delay value so that they can animate one after another. In the end, we have used CSS keyframes animation property to achieve the effect.

You May Also Like:

CSS Emoji Background Animation [ Source Code ]:

Start with a basic HTML file, and link it to an external CSS file. please Copy the code below and paste it into your file, then save the file. Test it in your browser and see if it's working or not. If the code doesn't work then download the code from below download button.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Emoji Background Animation using HTML CSS | No javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
</div>
<div class="banner">
	<div class="content">
		<h2>Smile Day <br><b>Friday, October 6th</b></h2>
	</div>
</div>
</body>
</html>

ADD CSS:

body{
    background: aliceblue; 
    height: 100vh;    
}
.wrapper span {
	position: fixed;
	bottom: -80px;
	animation: animate 10s linear infinite;
	font-size: 60px;
	z-index: -1;
}

.wrapper span:nth-child(1){
    left: 60px;
    animation-delay: 0.6s;    
}
.wrapper span:nth-child(2){
    left: 10%;
    animation-delay: 3s;  
}
.wrapper span:nth-child(3){
    left: 20%;
    animation-delay: 2s;    
}
.wrapper span:nth-child(4){
    left: 30%;
    animation-delay: 5s;   
}
.wrapper span:nth-child(5){
    left: 40%;
    animation-delay: 1s;    
}
.wrapper span:nth-child(6){
    left: 50%;
    animation-delay: 7s;    
}
.wrapper span:nth-child(7){
    left: 60%;
    animation-delay: 6s;  
}
.wrapper span:nth-child(8){
    left: 70%;
    animation-delay: 8s;    
}
.wrapper span:nth-child(9){
    left: 80%;
    animation-delay: 6s;  
}
.wrapper span:nth-child(10){
    left: 90%;
    animation-delay: 4s;    
}

.banner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    z-index: 1;
}
.content h2 {
	-webkit-text-fill-color: #111;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #111;
	font-family: montserrat;
	font-size: 80px;
	text-transform: uppercase;
	letter-spacing: 16px;
	text-align: center;
	line-height: 0.7;
	letter-spacing: 2px;
}
.content h2 b{
    -webkit-text-fill-color: transparent;
    letter-spacing: normal;
    font-size: 45px;
}


@keyframes animate{
    0% {
      transform: translateY(0);
        opacity: 1
    }
    70%{
        opacity: .8;
    }
    100% {
      transform: translateY(-800px) rotate(360deg);	
        opacity: 0
    }
}

I hope the snippet works for you. You can load more snippets by clicking on the Load More button at the bottom of our homepage. If you like what you read on our website, please share it with others. Thanks for your valuable time.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box