Tuesday, February 25, 2020

Running car Animation in CSS

HTML Code: 

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Animation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="back">
            <div class="highway"></div>
                <div class="city"></div>
                    <div class="car">
                        <img src="car.png">
                    </div>
                <div class="wheel">
                    <img src="wheel.png" class="back-wheel">
                    <img src="wheel.png" class="front-wheel">
                </div>
           
        </div>
    </body>
</html>

CSS Code:

*{
    padding: 0px;
    margin: 0px;
}

.back{
    width: 100%;
    height: 100vh;
    background: url(sky.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow-x: hidden;
}
.highway{
    background-image: url(road.jpg);
    width: 500%;
    height: 200px;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 1;
    background-repeat: repeat-x;
    animation: highway 5s linear infinite;
}
@keyframes highway{
    100%{
        transform: translateX(-3400px);
    }
}
.city{
    background-image: url(city.png);
    width: 500%;
    height: 250px;
    position: absolute;
    bottom: 200px;
    left: auto;
    right: 0;
    display: block;
    z-index: 2;
    background-repeat: repeat-x;
    animation: city 20s linear infinite;
}
@keyframes city{
    100%{
        transform: translateX(-1400px);
    }
}
.car{
    width: 400px;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.car img{
    width: 100%;
    animation: car 1s linear infinite;
}
@keyframes car{
    100%{
        transform: translateY(-1px);
    }
}
@keyframes car{
    50%{
        transform: translateY(1px);
    }
}
@keyframes car{
    0%{
        transform: translateY(-1px);
    }
}
.wheel{
    left: 50%;
    bottom: 178px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.wheel img{
    width: 72px;
    height: 72px;
    animation: wheel 1s linear infinite;
}
.back-wheel{
    left: -165px;
    position: absolute;
}
.front-wheel{
    left: 80px;
    position: absolute;
}

@keyframes wheel{
    100%{
        transform: rotate(360deg);
    }
}

Output:

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Simple Example of div tag in html with css

HTML and CSS Code : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <m...

  • first-angular Project
    Output :  I have created "first-angular" name project and in this project have a 3 components named as header, footer and section ...
  • HTML Basic Tags
    Program: <!DOCTYPE html> <html>     <head>         <title>All Tags in HTML</title>     </head>  ...