纯div+css无js代码实现一个三维秒表跑表码表计时效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：纯div+css无js代码实现一个三维秒表跑表码表计时效果代码，纯div+css代码，没有一行js代码。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap");
        .cuboid {
          width: 100%;
          height: 100%;
          position: relative;
        }
        .cuboid__side {
          filter: brightness(var(--b, 1));
          position: absolute;
        }
        .cuboid__side:nth-of-type(1) {
          --b: 1.1;
          height: calc(var(--depth, 20) * 1vmin);
          width: 100%;
          top: 0;
          transform: translate(0, -50%) rotateX(90deg);
        }
        .cuboid__side:nth-of-type(2) {
          --b: 0.9;
          height: 100%;
          width: calc(var(--depth, 20) * 1vmin);
          top: 50%;
          right: 0;
          transform: translate(50%, -50%) rotateY(90deg);
        }
        .cuboid__side:nth-of-type(3) {
          --b: 0.5;
          width: 100%;
          height: calc(var(--depth, 20) * 1vmin);
          bottom: 0;
          transform: translate(0%, 50%) rotateX(90deg);
        }
        .cuboid__side:nth-of-type(4) {
          --b: 1;
          height: 100%;
          width: calc(var(--depth, 20) * 1vmin);
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%) rotateY(90deg);
        }
        .cuboid__side:nth-of-type(5) {
          --b: 0.8;
          height: 100%;
          width: 100%;
          transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5vmin));
          top: 0;
          left: 0;
        }
        .cuboid__side:nth-of-type(6) {
          --b: 1.2;
          height: 100%;
          width: 100%;
          transform: translate3d(0, 0, calc(var(--depth, 20) * -0.5vmin)) rotateY(180deg);
          top: 0;
          left: 0;
        }
        :root {
          --stopwatch-size: 40;
          --stopwatch-depth: 10;
          --stopwatch-frame-depth: 4;
          --body-clip: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
          --state: paused;
          --bg: #ead9f2;
          --digit: #e6f2d9;
          --face: #0d1306;
          --content: #666;
          --glare: rgba(255,255,255,0.2);
          --stopwatch-frame: #667f99;
          --glass: rgba(204,229,255,0.15);
          --chord-one: #8c7373;
          --chord-two: #544545;
          --start: #80f20d;
          --reset: #f2330d;
        }
        *,
        *:after,
        *:before {
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        #start:checked ~ .stopwatch__content .ms--tens,
        #pause:checked ~ .stopwatch__content .ms--tens {
          --name: ms-tens;
        }
        #start:checked ~ .stopwatch__content .ms--singles,
        #pause:checked ~ .stopwatch__content .ms--singles {
          --name: ms-singles;
        }
        #start:checked ~ .stopwatch__content .s--tens,
        #pause:checked ~ .stopwatch__content .s--tens {
          --name: s-tens;
        }
        #start:checked ~ .stopwatch__content .s--singles,
        #pause:checked ~ .stopwatch__content .s--singles {
          --name: s-singles;
        }
        #start:checked ~ .stopwatch__content .m--tens,
        #pause:checked ~ .stopwatch__content .m--tens {
          --name: m-tens;
        }
        #start:checked ~ .stopwatch__content .m--singles,
        #pause:checked ~ .stopwatch__content .m--singles {
          --name: m-singles;
        }
        #start:checked ~ .stopwatch__content {
          --state: running;
        }
        #pause:checked ~ .stopwatch__content {
          --state: paused;
        }
        #start:checked ~ .stopwatch__body .stopwatch__start {
          z-index: -1;
          display: none;
        }
        #start:checked ~ .stopwatch__body .stopwatch__pause {
          display: block;
        }
        .stopwatch__start:active ~ .stopwatch__stop-start,
        .stopwatch__pause:active ~ .stopwatch__stop-start {
          --y: 25;
        }
        .stopwatch__reset:active ~ .stopwatch__restart {
          --y: 15;
        }
        @property --ms-tens {
          initial-value: 0;
          inherits: false;
          syntax: '<integer>';
        }
        @property --ms-singles {
          initial-value: 0;
          inherits: false;
          syntax: '<integer>';
        }
        @property --s-tens {
          initial-value: 0;
          inherits: false;
          syntax: '<integer>';
        }
        @property --s-singles {
          initial-value: 0;
          inherits: false;
          syntax: '<integer>';
        }
        @property --m-tens {
          initial-value: 0;
          inherits: false;
          syntax: '<integer>';
        }
        @property --m-singles {
          initial-value: 0;
          inherits: false;
          syntax: '<integer>';
        }
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background: var(--bg);
          overflow: hidden;
          font-family: 'Orbitron', sans-serif;
        }
        [type='checkbox'] {
          position: fixed;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
        }
        .scene {
          --rotate-y: 0;
          --rotate-x: 0;
          transform: translate(-50%, -50%);
          position: fixed;
          top: 50%;
          left: 50%;
          transition: transform 0.1s;
          transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(-24deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
        }
        .stopwatch {
          --depth: var(--stopwatch-depth);
          height: calc(var(--stopwatch-size, 50) * 1vmin);
          margin: 0;
          width: calc(var(--stopwatch-size, 50) * 1vmin);
        }
        .stopwatch__chords {
          height: 100vmax;
          width: 26%;
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .stopwatch__chord {
          height: 100%;
          width: 10%;
          position: absolute;
          top: 0;
        }
        .stopwatch.........完整代码请登录后点击上方下载按钮下载查看