Pure CSS wavy background animation

Hello friends. Today we present to you another CSS animation example. Today we will design a simple homepage layout with a wavy animation. Take a look at the video tutorial below before collecting the source code. The tutorial will help you to understand the source code of the snippet. We have 1000 video tutorials on front-end development on our YouTube channel. If you are interested in front-end development, then subscribe to our youtube channel.

I hope you have watched the video and understood how the snippet was created. The homepage is the front door of a website. We can also call it the entry door of any webpage. The first page that a visitor encounter when visiting a website is the homepage. If you want to give some animation without simplifying the homepage of your website then this snippet is for you. A container div was first taken to design the snippet. We have added a header, a paragraph tag, and a call-to-action button as banner elements. Inside this container div, we will take another div called 'wave' and inside it, we will take another div called 'single-wave'. In this inner div, we will give a background image through inline CSS. You can use photoshop to design the wave png image. We have used the CSS position absolute to bring the banner elements in the middle of the viewport. Then we have styled every element of 'mainText'. We set the 'single-wave' div to the bottom of the homepage with absolute position and background position and then set an animation value in it. Then we created the wave animation using CSS keyframes animation. If you follow the video tutorial above step by step, you will understand better.

You may also like:

Pure CSS wavy background animation [ Source Code ]:

To create the snippet, you first need to create two files. The first file is HTML and the second file is CSS. Then attach the external CSS file to your HTML file. Then copy the code from the code box below and paste it into your project. If you have a problem with the code below, then download the code from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Pure css wavy background animation</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="mainText">
			<h2>Digital marketing</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reiciendis totam harum, dolores expedita officiis.</p><a href="#">Learn More</a>
		</div>
		<div class="wave">
			<div class="single-wave" style="background-image: url('1.png')"></div>
		</div>
	</div>
</body>
</html>

ADD CSS:

body {
	font-family: 'Montserrat', sans-serif;
}
.container {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}
.wave {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
	bottom: -1px;
	background: #000000;
	z-index: 5;
}
.mainText {
	position: absolute;
	z-index: 99;
	top: 20%;
	left: 50%;
	transform: translate(-50%, 50%);
	text-align: center;
}
.mainText h2 {
	font-family: 'Orbitron', sans-serif;
	color: #fff;
	font-size: 50px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
}
.mainText p {
	color: #fff;
	font-size: 18px;
	line-height: 1.9;
	font-family: montserrat;
}
.mainText a {
	text-decoration: none;
	background: #fff;
	color: #000;
	padding: 10px 30px;
	display: inline-block;
	font-family: montserrat;
	font-weight: 600;
	text-transform: uppercase;
}
.single-wave {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
	background-size: 50% 80px;
	animation: animate 18s linear infinite;
}
@keyframes animate {
	0% {
		transform: translateX(0) translateZ(0) scaleY(1);
	}
	50% {
		transform: translateX(-25%) translateZ(0) scaleY(0.55)
	}
	100% {
		transform: translateX(-50%) translateZ(0) scaleY(1)
	}
}

I hope you have implemented the code correctly. We share these kinds of snippets in our blog regularly. So visit the blog frequently. Thanks for visiting the blog.

DOWNLOAD CODE

Pure CSS wavy background animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Pure CSS wavy background animation

Pure CSS wavy background animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form