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

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

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