div+css实现一个简约计时器效果代码-html代码-BFW代码库

div+css实现一个简约计时器效果代码

代码语言：html

代码描述：div+css实现一个简约计时器效果代码，无js代码，点击开始计时，再次点击暂停。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @property --n{
          syntax: '<integer>';
          inherits: true;
          initial-value: 0;
        }
        @property --t{
          syntax: '<color>';
          inherits: true;
          initial-value: #000;
        }
        @property --r{
          syntax: '<color>';
          inherits: true;
          initial-value: #000;
        }
        @property --b{
          syntax: '<color>';
          inherits: true;
          initial-value: #000;
        }
        @property --l{
          syntax: '<color>';
          inherits: true;
          initial-value: #000;
        }
        
        .d {
          width: 77px; /* size */
          display: inline-grid;
          aspect-ratio: .55;
        }
        .d:before,
        .d:after {
          content: "";
          padding: 20%;
          background:
            conic-gradient(from -45deg at 50% 45%,var(--t) 90deg,#0000 0),
            conic-gradient(from  45deg at 55% 50%,var(--r) 90deg,#0000 0),
            conic-gradient(from 135deg at 50% 55%,var(--b) 90deg,#0000 0),
            conic-gradient(from 225deg at 45% 50%,var(--l) 90deg,#0000 0);
          --m: conic-gradient(#000 0 0) content-box,conic-gradient(#000 0 0);
          -webkit-mask: var(--m);
                  mask: var(--m);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
          clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
          transition:--t .45s,--l .45s,--b .45s,--r .45s;
        }
        .d:after {
          margin-top: -20%;
          --t: #0000;
        }
        .d {
          --1:(var(--n) - 1)*(var(--n) - 1);
          --2:(var(--n) - 2)*(var(--n) - 2);
          --3:(var(--n) - 3)*(var(--n) - 3);
          --4:(var(--n) - 4)*(var(--n) - 4);
          --5:(var(--n) - 5)*(var(--n) - 5);
          --6:(var(--n) - 6)*(var(--n) - 6);
          --7:(var(--n) - 7)*(var(--n) - 7);
          --8:(var(--n) - 8)*(var(--n) - 8);
          --9:(var(--n) - 9)*(var(--n) - 9);
        }
        
        .d:before {
          --t:rgb(
            clamp(30,var(--1)*var(--4)*999,250)
            clamp(30,var(--1)*var(--4)*999,250)
            30);
          --r:rgb(
            clamp(30,var(--5)*var(--6)*999,250)
            clamp(30,var(--5)*var(--6)*999,250)
            30);
          --b:rgb(
            clamp(30,var(--n)*var(--1)*var(--7)*999,250)
            clamp(30,var(--n)*var(--1)*var(--7)*999,250)
            30);
          --l:rgb(
            clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250)
            clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250)
            30);
        }
        .........完整代码请登录后点击上方下载按钮下载查看