suraakshitha
commented
1 year ago Open suraakshitha opened 1 year ago
suraakshitha
commented
1 year ago suraakshitha
commented
1 year ago suraakshitha
commented
1 year ago / CSS Reset /
{
margin: 0;
padding: 0;
}
/ Sky Styling /
.sky {
width: 100vw;
height: 100vh;
background-image: url(sky.jpeg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
/ Tree styling and positioning /
.tree {
height:100vh;
background-image:url(tree-removebg-preview\ (1.png);
background-repeat:no-repeat;
background-size: cover;
}
/ Track styling and positioning /
.track {
background-image:url(track.jpeg);
background-repeat: repeat-x;
position: absolute;
bottom: 0px;
width: 1000vw;
height: 20vh;
animation: trackanimation 6s linear infinite;
}
/Car styling and positioning /
.car {
background-image: url(car-removebg-preview.png);
background-repeat: no-repeat;
background-size: cover;
width: 17rem;
height: 4.699rem;
position: absolute;
bottom: 77px;
left: 396px;
}
/ Wheel's styling and positioning /
.wheel {
position:absolute;
animation: wheelanimation linear .6s
}
.wheel1 {
background-image: url(wheel1-removebg-preview.png);
background-size: contain;
background-repeat: no-repeat;
width: 46px;
height: 49px;
left:570px;
}
.wheel2 {
background-image: url(wheel2-removebg-preview.png);
background-size: cover;
background-repeat: no-repeat;
width: 43px;
height: 44px;
bottom: 77px;
left:433px;
}
/Rotation of the wheels/
@keyframes trackanimation {
100% {
transform: rotate(360deg);
}
}
/Moving the track backwards */
@keyframes trackanimation {
100% {
transform: translate(-500vw);
}
}