Scribd
Upload
16 views5 pages

Car Code

The document contains HTML and CSS code that creates an animated scene of a car driving down a road at night. The HTML divides the scene into a containing road element and nested car and wheel elements. The CSS applies background images and styles like position, size, and animation to render the road, car, and spinning wheels and create the illusion of motion.

Uploaded by

Krushna Thakare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views5 pages

Car Code

The document contains HTML and CSS code that creates an animated scene of a car driving down a road at night. The HTML divides the scene into a containing road element and nested car and wheel elements. The CSS applies background images and styles like position, size, and animation to render the road, car, and spinning wheels and create the illusion of motion.

Uploaded by

Krushna Thakare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Html code

<div class="road-at-night">
<div class="road"></div>
<div class="car">
<div class="wheel wheel-1"></div>
<div class="wheel wheel-2"></div>
</div>
</div>
CSS
.road-at-night {
background-image: url(https://example.com/night-
sky.jpg);
background-size: cover;
height: 100vh;
position: relative;
}

.road {
background-image: url(https://example.com/road.png);
background-size: cover;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.car {
background-image: url(https://example.com/car.png);
background-size: cover;
height: 50px;
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
width: 100px;
}

.wheel {
background-image:
url(https://example.com/wheel.png);
background-size: cover;
border-radius: 50%;
height: 25px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) rotate(0deg);
width: 25px;
animation: rotation 1s linear infinite;
}

.wheel-1 {
left: 25px;
animation-delay: 0.2s;
}

.wheel-2 {
left: -25px;
animation-delay: 0.4s;
}

@keyframes rotation {
0% {
transform: translateX(-50%) rotate

You might also like