css实现行驶中小汽车动画效果代码-html代码-BFW代码库

css实现行驶中小汽车动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现行驶中小汽车动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        :root{
            --color-car-body:#f06043;
            --color-bg-1:#e4ffff;
        }
        
        html{
            height: 100%;
        }
        
        body{
            background-image: linear-gradient(to top,#88d6e7 30%,#e4ffff 20%);
            overflow: hidden;
        }
        
        .car{
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%,-100%);
            transform-origin: 25% bottom;
            animation: start-car 2.5s 1.1s;
            z-index: 100;
        }
        
        .car__top{
            margin-left: 10vmin;
            width: 24vmin;
            height: 14vmin;
            transform: skew(-10deg);
            border:3vmin solid #4a4c48;
            border-radius: 1vmin;
            border-right: 0;
        }
        
        .car__top::after{
            content: '';
            position: absolute;
            top: -3vmin;
            right: 0;
            width: 10vmin;
            height: 100%;
            transform:translateX(120%) skew(50deg);
            border:3vmin solid #4a4c48;
            border-left: 0;
        }
        
        .car__top::before{
            content: '';
            position: absolute;
            top: -.22vmin;
            right: 0;
            width: 16vmin;
            height: 100%;
            transform: translateX(70%) skew(10deg);
            border:3vmin solid #4a4c48;
            border-right: 0;
            border-top: 0;
        }
        
        .car__body{
            width: 75vmin;
            height: 18vmin;
            background-color: var(--color-car-body);
            border-radius: 10vmin;
            margin-top: -1.5vmin;
            position: relative;
            z-index: 10;
        }
        
        .car__bulb{
            position: absolute;
            top: 14%;
            right: 2%;
            width: 2vmin;
            height: 4vmin;
            border-radius: 1rem / 1.4rem;
            transform: rotate(-40deg);
            background-color: #fff;
        }
        
        .car__bulb--back{
            top: 14%;
            left: 2%;
            transform: rotate(35deg);
            background-color:#d14022;
        }
        
        .car__center{
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%);
            width: 10vmin;
            height: 2vmin;
            border-radius: 2vmin;
            background-color: #fff;
        }
        
        .car__wheels{
            display: flex;
            justify-content: space-around;
            margin-top: -9vmin;
            position: relative;
            z-index: 200;
        
        }
        
        .car__wheel{
                --r:18vmin;
                width: var(--r);
                height:var(--r);
                border-radius: 50%;
                border: 1.8vmin solid #323232;
                background-color: #fff;
                position: relative;
                animation: run .5s 1s linear infinite;
        }
        
        .wheel__circle{
            --r:2.4vmin;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:var(--r);
            height:var(--r);
            border-radius: 50%;
            background-color: #323232;
        }
        
        .wheel__rect{
            position: absolute;
            width: 2.8vmin;
            height: 3.1vmin;
            clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
            background-color: #323232;
        }
        
        .wheel__rect--1{
            top: 30%;
            left: 35%;
            transform: translate(-50%,-50%) rotate(-40deg);
        }
        
        .wheel__rect--2{
            top: 30%;
            left: 64%;
            transform: translate(-50%,-50%) rotate(35deg);
        }
        
        .wheel__rect--3{
            top: 50%;
            left: 25%;
            transform: translate(-50%,-50%) rotate(-90deg);
        
            
        }
        
        .wheel__rect--4{
            top: 50%;
            left: 75%;
            transform: translate(-50%,-50%) rotate(90deg);
        }
        
        .wheel__rect--5{
            top: 70%;
            left: 35%;
            transform: translate(-50%,-50%) rotate(-145deg);
        }
        
        .wheel__rect--6{
            top: 70%;
            left: 64%;
            transform: translate(-50%,-50%) rotate(146deg);
        
        }
        
.........完整代码请登录后点击上方下载按钮下载查看