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;
           .........完整代码请登录后点击上方下载按钮下载查看