无div纯css实现一个行驶中汽车的动画效果代码-html代码-BFW代码库

无div纯css实现一个行驶中汽车的动画效果代码

代码语言：html

所属分类：动画

代码描述：无div纯css实现一个行驶中汽车的动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html{
    box-sizing: border-box;

    --black :#1a1c20 ;
    --white : #fff ;
    --green : #00c380 ;
    --d-green : #019b66 ;
    --gray : #c1c1c1 ;
    --l-gray: #c4c4c4 ;
    --m-gray : #373838 ;
    --d-gray : #282724 ;
    --d-blue: #202428 ;
    --orange : #ef6206 ; 
    --yellow : #dfa500 ;
    --l-yellow: #deb953;
    --light: #fbfbfb ;
    --n-road : -4em;
    --p-road : 7em;

    background-color: var(--green) ;


}

html *,
html *::before,
html *::after{

    box-sizing: inherit ;

}

body::before,
body::after {

    content: " " ;
    position: absolute ;

}

body{

    margin: 0 ;
    height: 100vh ;
    display: flex ;
    overflow: hidden ;
    position: relative ;
    align-items: center ;
    justify-content: center ;
    background-repeat: no-repeat ;
    background-color: var(--green) ;
    animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite ;


    background-image : 


    /* ===rubber-l */ 

        radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
        radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%) ,
        radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
        radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
        linear-gradient(var(--black) 100%, transparent 0) ,

    /* rubber-l=== */ 

    
    /* ===rubber-r */ 

        radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
        radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%) ,
        radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
        radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
        linear-gradient(var(--black) 100%, transparent 0) ,

    /* rubber-r=== */ 


    /* ===shadow */ 

        linear-gradient( var(--d-green) 100% , transparent 0) ;

    /* shadow=== */


    background-size : 


    /* ===rubber-l */ 

        2.5em 2.5em ,
        0.7em 0.6em ,
        2.5em .9em ,
        2.5em .9em ,
        1.95em 3.9em ,

    /* rubber-l=== */


    /* ===rubber-r */ 

        2.5em 2.5em ,
        0.7em 0.6em ,
        2.5em .9em ,
        2.5em .9em ,
        1.95em 3.9em ,

  .........完整代码请登录后点击上方下载按钮下载查看