CSS Endless Road Animation Effects

In this tutorial we will show you that how to make Endless Road Effects using CSS. You can see demo on press below button and also available source code of this effects

Demo Download

Step to Make Endless Road Animation Effects Using CSS

To make a endless road animation effects using css we need to follow the below steps

  1. index.php
  2. style.css

1: Index.html

First of all we create a index.html file for write content, connect to style.css file in head section and following code paste in body section.

<!DOCTYPE html>
<html>
<head>
	<title>Infinite Road</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="infinite">
		<div class="shadow"></div>
	</div>
</body>
</html>

As you can see above code here we use div tag with class infinite and shadow. and also linked to style.css in head section of index.html

2: Style.css

Now create a style.css file and connect in html head section or you create a style tag in head section of index.html file and write all style code in it.

body
{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: radial-gradient(#f598af,#f53665);
}
.infinite
{
	position: relative;
	width: 800px;
	height: 160px;
	background: #f53665;
	transform-origin: bottom;
	transform-style: preserve-3d;
	transform: perspective(500px) rotateX(30deg);
}
.infinite:before
{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
	height: 10px;
	background: linear-gradient(90deg,#fff 0%,#fff 70%,#f53665 70%,#f53665 100%);
	background-size: 120px;
	animation: animate 0.5s linear infinite;
}
@keyframes animate
{
	0%{
		background-position: 0px;
	}
	100%{
		background-position: -120px;
	}
}
.infinite:after
{
	content: '';
	position: absolute;
	width: 100%;
	height: 30px;
	background: #f7baba;
	bottom: -30px;
	transform-origin: top;
	transform: perspective(500px) rotateX(-25deg);
}
.shadow
{
	position: absolute;
	bottom: -93px;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	height: 60px;
	background: linear-gradient(#000,transparent);
	opacity: 0.5;
}

Above code is very easy to understand, here we make style of body, infinite, infinte:before, infinite:after and shadow.

Conclusion

Today we learnt how to make a css endless road animation effects using html and css, you can add multiple this type of effects in your website just by adding the HTML markup and change name in style sheets.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *