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