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

Crab animation

HTML CODE: <! DOCTYPE html > < html lang = "en" > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Crab CSS Animation </ title >  < link rel = "stylesheet" href = "css/crab.css" /> </ head > < body > < div class = "container" > < div class = "crab" > < div class = "hand" > < div class = "claw-1-l" ></ div > < div class = "claw-1-r" ></ div > < div class = "claw-2-l" ></ div > < div class = "claw-2-r" ></ div > </ div > < div class = "mouth" ...

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 ; ...

Animated profile icon !!!

HTML CODE: <! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title > Profile animation </ title > < link rel = "stylesheet" type = "text/css" href = "css/profile.css" > </ head > < body > < div class = "wrapper" > < div class = "border-circle" id = "one" ></ div > < div class = "border-circle" id = "two" ></ div > < div class = "background-circle" > < div class = "triangle-light" ></ div > < div class = "body" ></ div > < span class = "shirt-text" > I </ span > < span class = "shirt-text" > ♥ </ span > < span class = "sh...

AshhhCode

Search This Blog