Машинка едет по ночному городу на CSS

02 апреля 2020

Всем привет. В этой статье я расскажу, как сделать анимацию на сайт на примере едущей машинки по ночному городу. Используя только HTML и CSS.

Посмотреть результат

Содержание файлов:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анимация машинки на CSS | Антон Анискович</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="world">
        <div class="highway"></div>
        <div class="city"></div>

        <div class="car">
            <img src="img/car.png" alt="">
        </div>

        <div class="wheel">
            <img src="img/wheel.png" alt="" class="back-wheel">
            <img src="img/wheel.png" alt="" class="front-wheel">
        </div>

    </div>

</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}

.world{
    min-height: 100vh;
    width: 100%;
    background-image: url("img/sky.jpg");
    background-size: cover;
    position: relative;
    overflow-x: hidden;
}

.highway{
    height: 200px;
    width: 500%;
    display: block;
    background-image: url("img/road.jpg");
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-repeat: repeat-x;
    animation: highway 5s linear infinite;
}

@keyframes highway{
    100%{
        transform: translateX(-3400px);
    }
}

.city{
    height: 250px;
    width: 500%;
    background-image: url("img/city.png");
    position: absolute;
    left: 0;
    right: 0;
    bottom: 200px;
    display: block;
    z-index: 1;
    background-repeat: repeat-x;
    animation: city 20s linear infinite;
}

@keyframes city{
    100%{
        transform: translateX(-1400px);
    }
}

.car{
    width: 400px;
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    z-index: 2;
}

.car img{
    width: 100%;
    animation: car 1s linear infinite;
}

@keyframes car{
    100%{
        transform: translateY(-1px);
    }
    50%{
        transform: translateY(1px);
    }
    0%{
        transform: translateY(-1px);
    }
}

.wheel{
    left: 50%;
    position: absolute;
    bottom: 171px;
    transform: translateX(-50%);
    z-index: 2;
}

.wheel img{
    width: 65px;
    height: 65px;
    animation: wheel 1s linear infinite;
}

.back-wheel{
    left: -146px;
    position: absolute;
}
.front-wheel{
    left: 100px;
    position: absolute;
}

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

Исходные изображения:

Скачать изображения

Видео с пошаговой инструкцией:

Дорогие друзья если Вам понравилась статья и Вы хотите меня поддержать, то подписывайтесь на мой блог и канал на youtube. Это для меня самая лучшая благодарность. Всем до новых встреч.