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