Закрыть меню
  1. Главная страница
  2. HTML и CSS
  3. Машинка едет по ночному городу на CSS

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

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

Посмотреть результат
Едущая машина на CSS
Едущая машина на 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. Это для меня самая лучшая благодарность. Всем до новых встреч.

Поделиться:
Комментарии: