css实现对对碰车碰撞动画效果代码-html代码-BFW代码库

css实现对对碰车碰撞动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现对对碰车碰撞动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
:root {
        --carLeft: #5fb73f;
        --carRight: #f03211;
        --carBase: #242123;
        --headLights: #e59d16;
        --headLightsR: #28b5fc;
        --carTop: #f1287c;
        --carTopR: #28e0f1;
        --tailLight: #5ebef5;
        --tailLightR: #fbbf02;
        --tailShadow: #e22f6c;
        --tailColor: #7b7879;
        --tailEnd: #ac5271;
        --seat: #434343;
        --face: #fbcd64;
}
body {
        background: linear-gradient(to bottom, #f9eed2, #f4daa9);
        background-repeat: no-repeat;
        background-attachment: fixed;
}

.container {
        position: relative;
        display: flex;
        margin: auto;
        justify-content: center;
}

.leftCar {
        position: absolute;
        display: block;
        animation: moveLeft 1s ease-in-out infinite;
}

.rightCar {
        position: absolute;
        display: block;
        animation: moveRight 1s ease-in-out infinite;
}

#carBodyL,
#carBodyR {
        position: absolute;
        display: block;
        width: 8.5em;
        height: 2em;
        border-radius: 0% 0% 25% 25%;
        z-index: 5;
}

#carBodyL {
        background: var(--carLeft);
        transform: translate(-130%, 970%);
}

#carBodyR {
        transform: translate(40%, 970%);
        background: var(--carRight);
}

#carBackL,
#carBackR {
        position: absolute;
        display: block;
        width: 2em;
        height: 3.7em;
        z-index: 4;
}

#carBackL {
        background: var(--carLeft);
        transform: translate(-465%, 430%);
        border-radius: 70% 20% 30% 10%;
        border-right: var(--carTop) solid 6px;
}

#carBackR {
        background: var(--carRight);
        transform: translate(400%, 435%);
        border-radius: 20% 70% 10% 30%;
        border-left: var(--carTopR) solid 6px;
}

#carFrontL,
#carFrontR {
        position: absolute;
        display: block;
        width: 2.7em;
        height: 2.6em;
        z-index: 6;
}

#carFrontL {
        background: var(--carLeft);
        transform: translate(-182%, 650%);
        border-radius: 10% 80% 0% 0%;
        border-left: var(--carTop) solid 6px;
}

#carFrontR {
        background: var(--carRight);
        transform: translate(110%, 650%);
        border-radius: 80% 10% 0% 0%;
        border-right: var(--carTopR) solid 6px;
}

#carBaseL,
#carBaseR {
        position: absolute;
        display: block;
        width: 9.5em;
        height: 0.7em;
        border-radius: 10em;
        z-index: 6;
}

#carBaseL {
        background: linear-gradient(#911d57, var(--carTop));
        border: #911d57 solid 1px;
        transform: translate(-120%, 2540%);
        box-shadow: -1px 2px var(--carTop);
}

#carBaseR {
        background: linear-gradient(#1d2e91, var(--carTopR));
        transform: translate(32%, 3000%);
        box-shadow: -1px 2px var(--carTopR);
}

#headLight1L,
#headLight1R {
        position: absolute;
        display: block;
        width: 1em;
        height: 1em;
        border: #242321 1px solid;
        border-radius: 50%;
        z-index: 6;
}

#headLight1L {
        background: var(--headLights);
        transform:.........完整代码请登录后点击上方下载按钮下载查看