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

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

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