環境

html
css
html5
css3
車
走らせる
car
script

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="car-container">


        <div class="car-top1">
            <div class="window1"></div>
            <div class="window2"></div>

        </div>


        <div class="car-top2">
            <div class="door">
                <div class="door-knob"></div>
            </div>
        </div>


        <div class="car-bottom">
            <div class="wheel1-top"></div>
            <div class="wheel1">
                <div class="wheel-dot1"></div>
                <div class="wheel-dot2"></div>
                <div class="wheel-dot3"></div>
                <div class="wheel-dot4"></div>

            </div>

            <div class="wheel2-top"></div>
            <div class="wheel2">
                <div class="wheel-dot1"></div>
                <div class="wheel-dot2"></div>
                <div class="wheel-dot3"></div>
                <div class="wheel-dot4"></div>
            </div>
        </div>
    </div>


</body>
</html>

css

   html {
        box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }
body {
    overflow: hidden;
    height: 100vh;
    background: linear-gradient(180deg, #09283d, #1b415c, #29516c, #6e8ea5, #7cadd0, #7cadd0, #7cadd0, #7cadd0, #6e8ea5, #3a6583, #1a4461, #09283d);
    background-size: 2400% 2400%;
    animation: dayNight  60s ease infinite;
    }

@keyframes dayNight {
    0%{background-position:25% 0%}
    50%{background-position:76% 100%}
    100%{background-position:25% 0%}
}
    @keyframes driving {
        0% {
            left: -25%;
        }
        10% {
            bottom: 0%;
        }
        20% {
            transform: scale(0.5) rotateZ(-5deg);
            bottom: 5%
        }
        25% {
            transform: scale(0.5) rotateZ(0deg);
        }
        40% {
            transform: scale(0.5) rotateZ(5deg);
        }
        50% {
            transform: scale(0.5) rotateZ(0deg);
        }
        100% {
            left: 110%;
            bottom: 10%;
            transform: scale(0.5) rotateZ(0deg);
        }
    }
    @keyframes road-moving {
        100% {
            transform: translate(-2400px);
        }
    }
    @keyframes wheelsRotation {
        100% {
            transform: rotate(360deg);
        }
    }

    /*   CAR CONTAINER   */

    .car-container {
        position: absolute;
        bottom: -10%;
        width: 430px;
        height: 300px;
        animation: driving 5s infinite linear;
        transform: scale(0.5);
    }
    .car-container:after {
        content: "";
        width: 426px;
        height: 1px;
        margin-top: 88px;
        display: block;
        position: absolute;
        left: -3%;
        z-index: -1;
        bottom: 0;
        box-shadow: 2px -15px 25px 2px #000000;
    }
    /*   WHEELS   */

    .wheel1,
    .wheel2 {
        width: 120px;
        height: 120px;
        background-color: grey;
        border-radius: 50%;
        border: 20px solid black;
        position: absolute;
        bottom: 0;
        animation: wheelsRotation 1s infinite linear;
    }
    .wheel1 {
        left: 5%;
    }
    .wheel1-top,
    .wheel2-top {
        bottom: 48px;
        position: absolute;
        width: 106px;
        height: 80px;
        border-radius: 50%;
        z-index: 5;
        box-shadow: 0px 13px 3px 0px rgba(240, 240, 240, 0.53);
        transform: rotateX(180deg);
    }
    .wheel1-top {
        left: 7%;
    }
    .wheel2-top {
        right: 7%;
    }
    .wheel2 {
        right: 5%;
    }
    .wheel-dot1,
    .wheel-dot2 {
        width: 10px;
        height: 25px;
        background-color: black;
        position: absolute;
    }
    .wheel-dot3,
    .wheel-dot4 {
        width: 25px;
        height: 10px;
        background-color: black;
        position: absolute;
    }
    .wheel-dot1 {
        top: 10%;
        left: 45%;
    }
    .wheel-dot2 {
        bottom: 10%;
        left: 45%;
    }
    .wheel-dot3 {
        top: 45%;
        right: 10%;
    }
    .wheel-dot4 {
        top: 45%;
        left: 10%;
    }
    .door {
        width: 110px;
        height: 100px;
        border: 3px solid #B57A84;
        position: absolute;
        left: 36%;
        top: 16px;
        border-radius: 10% 40% 10% 10%;
    }
    .door-knob {
        width: 30px;
        height: 14px;
        background-color: #E8E6E6;
        border-radius: 30%;
        position: absolute;
        left: 20%;
        top: 5%;
        border: 1px solid lightcoral;
    }
    .car-top1 {
        border-radius: 25% 40% 0 0;
        background-color: #6A1621;
        max-width: 100%;
        width: 250px;
        height: 130px;
        position: absolute;
        top: 0;
        left: 4%;
    }
    .window1,
    .window2 {
        background-color: #E2F0F6;
        border-radius: 5px;
        position: absolute;
        width: 40%;
        height: 60%;
        margin: 17px;
        border: 9px solid #BF6D7B;
    }
    .window1 {
        left: 0;
        border-top-left-radius: 30%;
    }
    .window2 {
        right: 0;
        border-top-right-radius: 50%;
    }
    .car-top2 {
        border-radius: 100px 200px 0 0;
        background-color: #25659C;
        */ border: 10px solid #72252F;
        background-color: #9C2535;
        max-width: 100%;
        width: 430px;
        height: 140px;
        position: absolute;
        bottom: 20%;
    }

/*Headlights*/
.car-top1:after {
    width: 13px;
    height: 37px;
    background-color: #BACCDA;
    position: absolute;
    bottom: -63px;
    right: -168px;
    z-index: 10;
    content: " ";
    border-radius: 10px;
    border: 2px solid black;
    border-left-style: none;
    transform: rotate(-15deg);
}

    .car-top2:after {
    position: absolute;
    bottom: 7px;
    right: -340px;
    content: " ";
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 80px solid transparent;
    border-right: 500px solid rgba(191,188,87,0.7);
    z-index: -1;
    -webkit-mask-box-image: -webkit-linear-gradient(left, black, transparent);
    -webkit-mask-box-image: -o-linear-gradient(left, black, transparent);
    -webkit-mask-box-image: linear-gradient(to right, black, transparent);
    transform: rotate(-9deg);
    }