How To Create An Endless Road Animation Effect Only HTML And CSS

Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects.

File structure:

index.html
style.css

HTML code: In the following code, we have placed the Endless div in such a way that it covers the whole webpage. After that, the shadow are put over the shadow and finally, the wheels are fitted in the shadow so that they can rotate, and we can create an animation for a running shadow. We have added the styles using the file style.css

<!DOCTYPE html>

<head>

<title>Endless road animation effect</title>

</head>

<body>

</div>

</body>

</html>

style.css: The following is the code for file “style.css” which is used in the above HTML code.

body{

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #900C3F;

}

.Endless{

position: absolute;

width: 800px;

height: 160px;

background: #c70039;

transform-origin: bottom;

transform-style: preserve-3d;

transform: perspective(500px) rotateX(30deg);

}

.Endless::before{

content: '';

position: absolute;

top: 50%;

left: 0;

width: 100%;

height: 10px;

transform: translateY(-50%);

background: linear-gradient(90deg, #fff 0%,#fff 70%,#525252 70%,#525252 100% );

background-size: 120px;

animation: animate 0.5s linear infinite;

}

@keyframes animate {

0%{

background-position: 0px;

}

100%{

background-position: -120px;

}

.Endless::after{

content: '';

position: absolute;

width: 100%;

height: 30px;

background: #333;

bottom: -30px;

transform-origin: top;

transform: perspective(500px) rotate(-250px);

}

.shadow{

position: absolute;

bottom: -93px;

left: 50%;

transform: translateX(-50%);

height: 60px;

background: linear-gradient(#000,transparent);

width: 95%;

opacity: 0.5;

}

Output :

My facebook page link:

https://www.facebook.com/OnlineCoding560956

Online school 29

How To Create An Endless Road Animation Effect Only HTML And CSS