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

代码语言：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 ,

    /* rubber-r=== */ 


    /* ===shadow */ 

        13em .9em ;

    /* shadow=== */

   
    background-position : 


    /* ===rubber-l */ 

        calc(50% - 6.4em) calc(50% - 1.7em) ,
        calc(50% - 5.26em) calc(50% - -3.4em) ,
        calc(50% - 6.5em) calc(50% - -3.8em) ,
        calc(50% - 4.3em) calc(50% - -3.2em) ,
        calc(50% - 6.58em) calc(50% - -1.5em) ,

    /* rubber-l=== */ 

    
    /* ===rubber-r */ 

        calc(50% - -6.45em) calc(50% - 1.7em) ,
        calc(50% - -5.26em) calc(50% - -3.4em) ,
        calc(50% - -6.5em) calc(50% - -3.8em) ,
        calc(50% - -4.3em) calc(50% - -3.2em) ,
        calc(50% - -6.58em) calc(50% - -1.5em) ,

    /* rubber-r=== */ 


    /* ===shadow */ 

        center calc(50% - -3.8em) ;

    /* shadow=== */


}



body::before{

    top: calc(50% - 26.2em) ;
    width: 15.5em ;
    height: 62.9em ;
    background-size: 24.6% 491% ;
    background-repeat: no-repeat ;
    background-position: center 0 ;
    animation: line 1.5s infinite linear, move-road 3.5s infinite linear ;
    transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
    background-image: repeating-linear-gradient(to top, var(--white) , var(--white) 4.6%, transparent 0 , transparent 13.01%) ;

}





body::after{

    width: 15.2em ;
    height: 13.2em ;
    top: calc(50% - 8.8em) ;
    left:calc(50% - 7.55em) ;
    background-repeat: no-repeat ;
    animation: light 1s linear infinite,  shake 3.5s linear infinite ;  
    


    background-image : 

    /* ===ceiling */ 

        radial-gradient(58em 20em at 50% 215% , transparent 20% , var(--white) 20.5% , var(--white) 20.8% , var(--green) 21.5%) ,

    /* ceiling=== */


    /* ===antenna */ 

        radial-gradient( circle at center 100% , var(--black)  30% , transparent 0) ,

    /* antenna=== */
    
    
    /* ===antenna */ 

        linear-gradient(var(--white) 100% , transparent 0) ,

    /* antenna=== */


    /* ===glass-l */ 

        radial-gradient( 17.8em 37em at 70% 240% , var(--black) 30% , transparent 30.5%) ,

    /* glass-l=== */


    /* ===glass-r */ 

        radial-gradient( 17.8em 37em at 31% 240% , var(--black) 30% , transparent 30.5%) ,

    /* glass-r=== */


    /* ===light */ 

        radial-gradient( circle , var(--light) 48% ,  var(--black) 52%, var(--black) 59% , transparent 62%) ,

    /* light=== */


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