Home » Html Css » Moving Car Animation With Html & Css

Moving Car Animation With Html & Css

Html Css

Posted by NzCoding - 16 January 2022

Video Tutorial:

Html Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
    <title>NzCoding - Animated Car With Html & Css</title>

    <link rel="stylesheet" href="assets/css/style.css" />

</head>
<body>
    
    <div class="bg">
        <img src="assets/images/car2.png" alt="" class="car">
    </div>

</body>
</html>

Css Code:

body {
    padding: 0;
    margin: 0;
    overflow-y: hidden;
}

.bg {
    position: relative;
    background: #00fdff url(../images/background.jpg);
    height: 100vh;
    background-size: cover;
    background-position: 0 0;
    background-repeat: repeat-x;
    animation: animate 15s linear infinite;

}

.car {
    position: absolute;
    bottom: -70px;
    left: 15%;
}

@keyframes animate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}