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

代码语言：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: translate(-350%, 1730%);
	box-shadow: -3px 1px #e27d7d;
}

#headLight1R {
	background: var(--headLightsR);
	transform: translate(330%, 1730%);
	box-shadow: 3px 1px #dcd3d3;
}

#carTopL,
#carTopR {
	position: absolute;
	display: block;
	width: 4.2em;
	height: 0.5em;
	z-index: 3;
}

#carTopL {
	background: var(--carTop);
	transform: translate(-230%, 3800%);
	border-radius: 50% 70% 0% 0%;
}

#carTopR {
	background: var(--carTopR);
	transform: translate(150%, 3800%);
	border-radius: 70% 50% 0% 0%;
}

#tailLamp1L,
#tailLamp1R {
	position: absolute;
	display: block;
	width: 1.3em;
	height: 0.5em;
	z-index: 6;
	border-radius: 1em;
}

#tailLamp1L {
	background: var(--tailLight);
	transform: translate(-870%, 4000%);
	box-shadow: -3px 2px var(--tailShadow);
}

#tailLamp1R {
	background: var(--tailLightR);
	transform: translate(840%, 4000%);
	box-shadow: 3px 2px var(--carTopR);
}

#tailL,
#tailR {
	position: absolute;
	display: block;
	width: 0.2em;
	height: 9em;
	background: var(--tailColor);
}

#tailL {
	transform: translate(-5400%, 90%);
}

#tailR {
	transform: translate(5400%, 90%);
}

#tailEndL,
#tailEndR {
	position: absolute;
	display: block;
	width: 0.5em;
	height: 0.5em;
	background: var(--tailEnd);
	border-radius: 50%;
}

#tailEndL {
	transform: translate(-2195%, 1600%);
}

#tailEndR {
	transform: transl.........完整代码请登录后点击上方下载按钮下载查看