svg+css实现计时器倒计时代码-html代码-BFW代码库

svg+css实现计时器倒计时代码

代码语言：html

代码描述：svg+css实现计时器倒计时代码，没有一行js代码，全部css和svg实现。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@property --number {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  background: #017343;
}
label {
  height: 60vh;
  pointer-events: none;
}
input {
  display: none;
}
svg {
  width: 100%;
  height: 100%;
}
svg * {
  pointer-events: visiblePainted;
  cursor: pointer;
}
#p1 {
  y: -21px;
  fill: #d40000;
  rx: 1px;
}
#c {
  fill: #c2ced0;
  stroke:#000000;
}
use {
  display: none;
  --pos: pow(2,var(--digit));
}
#d1 {
  --digit: mod(var(--number), 10);
}
#d2 {
  --digit: round(down,var(--number)/10);
}
:checked + svg {
  animation: count 60s steps(60, end);
}
:checked +svg #c {
  fill: hsl(70, 100%, calc(100% - 6% * round(up, var(--number) / 60)));
}
:checked + svg #p1 {
  y: -18px;
}
:checked + svg use {
  display: inline;
  fill: hsl(0, 100%, calc(42% - 42% * round(up, var(--number) / 60)));
}
path {
  transform: skewX(-5deg);
  opacity: round(down,mod(var(--magic),var(--pos)*2)/var(--pos));
}
@keyframes count {
  from { --number: 60 }
  to { --number: 0 }
}
</style>

  
  
</head>

<bo.........完整代码请登录后点击上方下载按钮下载查看