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