js+css实现汽车驾驶室行驶加速仪表盘动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现汽车驾驶室行驶加速仪表盘动画效果代码，按住鼠标左键不放开始加速。

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>
@font-face {
	font-family: "Alarm Clock";
	src: url("//repo.bfw.wiki/bfwrepo/font/Alarm-Clock.ttf") format("truetype");
}

@font-face {
	font-family: "Dymo";
	src: url("//repo.bfw.wiki/bfwrepo/font/Dymo.ttf") format("truetype");
}

:root {
	--num: "00";
}	

*:before, *:after {
	position: absolute;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 100vmin;
	cursor: grab;
	background: linear-gradient(180deg, #673ab7, #ff980094 18vh, #ff600080 40vh, #1e6f20b3 40vh 43vh, #8bc34a 60vh 65vh, #255226 88vh, #0a190b 100vh);
}

body:active {
	cursor: grabbing;
}

body * {
	transform-style: preserve-3d;
	box-sizing: border-box;
	position: absolute;
}

body:before {
	content: "";
	top: 40vh;
	left: 20vw;
	width: 60vw;
	height: 70vh;
	background: #222;
	transform: rotateX(70deg);
	transform-origin: center top;
	border-right: 5vmin double #ffcc00e0;
	border-left: 5vmin double #ffcc00db;
	box-sizing: border-box;
	clip-path: polygon(2% 0, 98% 0, 98% 100%, 2% 100%);
}

body:after {
	content: "";
	top: 40vh;
	left: 49.4vw;
	width: 1.2vw;
	height: 50vh;
	background: repeating-linear-gradient(0deg, #ffcc00e0 0 12.5%, #fff0 0 25%);
	transform: rotateX(70deg);
	transform-origin: center top;
	animation: road-line calc(var(--spd) * 0.025s) linear 0s infinite;
	transition: animation 1s linear 0s;
	background-size: 100% 200%;
	background-position: 0 0;
	z-index: 0;
	filter: drop-shadow(35vw 5vmin 40px #000b) drop-shadow(-35vw 5vmin 40px #000c);
}

@keyframes road-line {
	0% { background-position: 0% 0%;   }
	100% { background-position: 0% -100%; }
}


/*** FLASH ***/

.flash {
	width: 65vw;
	height: 40vw;
	top: 25vmin;
	border-radius: 100%;
	background: radial-gradient(white, #cff0ff, #a3d6ff, transparent);
	z-index: 1;
	border: 10vmin dotted #ffffff;
	box-sizing: border-box;
	box-shadow: 0 0 5vmin 3vmin #fff;
	filter: blur(50px) drop-shadow(2px 4px 22px #fffc) brightness(1.1);
	opacity: 0;
}

.ray.on + .content + .flash {
	animation: flashing 0.125s ease 0s 1, flashing 0.25s ease 0.1s 1, flashing 0.5s ease 0.25s 1;
}

@keyframes flashing {
	0% { opacity: 1; transform: scale3d(0.1, 0.1, 0.1); }
	10% { opacity: 1; transform: scale3d(0.2, 0.2, 0.2); }
	11%, 20% { opacity: 0.5; }
	21% { opacity: 1; transform: scale3d(0.15, 0.15, 0.15); }
	25% { opacity: 1; transform: scale3d(0.5, 0.5, 0.5); }
	26%, 34% { opacity: 0.5; }
	35% { opacity: 1; transform: scale3d(0.75, 0.75, 0.75); }
	38% { opacity: 0.95; transform: scale3d(0.65, 0.65, 0.65); }
	45% { opacity: 1; transform: scale3d(0.85, 0.85, 0.85); }
	55% { opacity: 1; transform: scale3d(1, 1, 1); }
	56% { opacity: 0.85; }
	67% { opacity: 1; transform: scale3d(1.15, 1.15, 1.15); }
	77% { opacity: 0.95; transform: scale3d(1.5, 1.5, 1.5); }
	78% { opacity: 1;  }
	100% { opacity: 1; transform: scale3d(2, 2, 2); }
}



/*** CONTENT ***/

.content {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(0deg, #03a9f487 18%, #0002 69% 100%);
	background: 
		linear-gradient(0deg, #03a9f487 18%, #0002 69% 100%), 
		linear-gradient(45deg, #fff0 63%, #fff2  66% 68%, #fff0 70%, #fff2 71%, #fff0 72% 100%);
	position: relative;
	perspective: 100vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective-origin: top;
	z-index: 2;
	animation: bounce 2s ease 0s infinite alternate;
	margin-top: -0.75vmin;
}

.ray.future + .content {
	background: linear-gradient(0deg, #03a9f487 18%, #0002 69% 100%), linear-gradient(80deg, #fff0 10%, #fff3  25% 30%, #fff0 45% 100%);
}

@keyframes bounce {
	10% { margin-top: -0.75vmin; }
	20% { margin-top: 0vmin; }
	35% { margin-top: -0.25vmin; }
	45%, 75% { margin-top: -0.65vmin; }
	100% { margin-top: -0.85vmin; }
}

.ray.on + .content {
	animation: joggle 0.3s ease 0s 3;
}

@keyframes joggle {
	33% { margin-left: -0.5vmin; }
	66% { margin-left: 0.25vmin; }
	100% { margin-left: -0.5vmin; }
}

.content:before {
	content: "";
	top: 60vh;
	width: 200%;
	left: -50%;
	background: #111;
	height: 100vmin;
	border-radius: 40%;
	border: 5vmin solid #333;
	box-shadow: 0 0 1vmin 0vmin #000 inset, 0 0 1vmin 0vmin #000;
}


/*** CUBOID ***/

.cuboid {
	--width: 10;
	--height: 10;
	--depth: 7;
	--hue: 225;
	--sat: 95%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
}

.side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border-radius: 2px;
	border: 1px solid #0004;
	transition: all 1s ease 0s;
	background: linear-gradient( 45deg, #bcc6cc, #eee 33%, #eee 38%, #bcc6cc);
	border: 1px solid #fff;
	box-shadow: 0 0 2vmin -0.5vmin #0008 inset;
}

.side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 100%);
}

.side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
}

.side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}

.side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}

.side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 95%);
}

.side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}	



/*** OUTER BOX ***/

.outer-box {
	--width: 52;
	--height: 16;
	margin-top: 25vmin;
	margin-left: -45vmin;
	transform: translateZ(3.5vmin);
}

.outer-box:before {
	content: "";
	width: 200%;
	height: 60%;
	background: linear-gradient(190deg, #fff, #000);
	transform: translateZ(-3.75vmin) rotateX(90deg) translateY(-3vmin);
	border-radius: 50% 50% 10% 10% / 50% 50% 10% 10%;
	transform-origin: center bottom;
	filter: brightness(1.5) drop-shadow(0px 2px 5px #fff);
}

.outer-box .side:nth-child(1):before, 
.outer-box .side:nth-child(1):after {
	content: "SET TO";
	font-family: 'Dymo', Arial, Helvetica, serif;
	font-size: 8vmin;
	float: left;
	text-align: center;
	width: 10vmin;
	line-height: 4.75vmin;
	margin-top: 0.5vmin;
	margin-left: 0.1vmin;
}

.outer-box .side:nth-child(1):after {
.........完整代码请登录后点击上方下载按钮下载查看