Aesthetic Car Animation !!!

HTML CODE:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Car</title>
        <link rel="stylesheet" href="mustang.css">
    </head>
    <body>
        <div class="night">
            <div class="surface"></div>
            <div class="car">
                <img src="./Img_06.png" alt="">
            </div>
        </div>
    </body>
</html>

CSS CODE:

body{
    margin:0;
    background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
    overflow-y: hidden;
}
.night{
    height: 80vh;
    width: 70vw;
    border: 1px solid black;
    margin: 5rem auto;
    background: url("./Img_1.png");
    background-size: cover;
    position: relative;
    box-shadow: 1px 2px 60px rgba(0,0,0,0.4);
    overflow-x: hidden;
}
.surface
{
    height:140px;
    width: 500%;
    background: url("./Img_02.png");
    display: block;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-repeat: repeat-x;
    animation: moveRight 6s linear infinite;
}
.car
{
    position: absolute;
    bottom: 8%;
    left: 24%;
    animation: suspension 1s linear infinite;
}
@keyframes moveRight {
    100%{transform: translateX(-2950px);}
}
@keyframes suspension {
    100%{
        transform: translateY(-1px);
    }
    50%{
        transform: translateY(2px);
    }
    0%{
        transform: translateY(-1px);
    }
}

LINK to Download images =:

https://drive.google.com/file/d/1dUIPySjEbQL38e1sY34PKh7yqJmWdwAc/view

Comments

Toggle animation using CSS!!!

HTML CODE: <! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title > Toggle </ title > < link rel = "stylesheet" href = "Toggle.css" > </ head > < body > < input type = "checkbox" id = "day-night" >< label for = "day-night" ></ label > < div class = "content" > < div class = "moon-sun" ></ div > < div class = "cuboid floor one" > < div class = "side" ></ div > < div class = "side" ></ div > < div class = "side" ></ div > < div class = "side" ></ div > < div class = "side" ></ div > ...

Animated amongus !!!

HTML CODE: <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Among Us </ title > < link rel = "stylesheet" href = "amongus.css" > </ head > < body > < div class = "player" > < div class = "visor" ></ div > < div class = "backpack" ></ div > < div class = "leg front" ></ div > < div class = "leg back" ></ div > < div class = "shade" ></ div > </ div > </ body > </ html > CSS CODE: html , body { height : 100vh ; } body { display : flex ; align-items : center ; ...

Mountains and Truck

HTML CODE: <! DOCTYPE html > < html > < head > < title > Message Box </ title > < link rel = "stylesheet" href = "css/mountain.css" /> </ head > < div class = "loop-wrapper" > < div class = "mountain" ></ div > < div class = "hill" ></ div > < div class = "tree" ></ div > < div class = "tree" ></ div > < div class = "tree" ></ div > < div class = "rock" ></ div > < div class = "truck" ></ div > < div class = "wheels" ></ div > </ div > </ html > CSS CODE: body { background : #136482 ; overflow : hidden ; font-family : 'Open Sans' , sans-serif ; } .loop-wrapper { margin : 0 auto ; position : relative ; display : block ...

AshhhCode

Search This Blog