纯css实现led数字倒计时动画代码-html代码-BFW代码库

纯css实现led数字倒计时动画代码

代码语言：html

所属分类：动画

代码描述：纯css实现led数字倒计时动画代码，需要chrome等现代浏览器支持

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

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

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

  
  
  
<style>
@property --num {
  syntax: '<number>';
  inherits: true;
  initial-value: -2;
}

:root {
  --size: 50vmin;
  --gap: 1vmin;
}

@keyframes stepsAnim {
  to { --num: 11; }
}

@function --centerY(--row: 0) {
  result: calc((var(--h) * var(--row)) + (var(--gap) * var(--row)) + 50%);
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  
  background: #ec472c;
  color: #000;
  
  animation: stepsAnim 13s steps(13) infinite;
  
  /*
  &:before {
    content: counter(num);
    counter-reset: num var(--num);
    
    position: absolute;
    top: 8vmin;
    left: 8vmin;
    color: #fff;
    font-size: 8vmin;
  }
  */
}

div {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vmin;
  counter-reset: i;
}

span {
  --h: calc(var(--size) / 8);
  --move-left: calc(-100% - var(--gap));
  --move-double-left: calc(-200% - var(--gap) - var(--gap));
  --move-right: calc(100% + var(--gap));
  --move-double-right: calc(200% + var(--gap) + var(--gap));
  
  display: block;
  height: var(--h);
  aspect-ratio: 2 / 1;
  background: currentcolor;
  transition: transform var(--speed, .5s) var(--delay, 0ms) cubic-bezier(0.65, 0, 0.35, 1);
  
  /*
  &:before {
    counter-increment: i;
    content: counter(i);
    font-size: 4vmin;
    color: #fff;
  }
  */
}

span:nth-child(3n + 1) {
  --move: var(--move-right);
  --move-double: var(--move-double-right);
}

span:nth-child(3n + 2) {
  --move: var(--move-right);
  --move-double: 0%;
}

span:nth-child(3n + 3) {
  --move: var(--move-left);
  --move-double: var(--move-double-left);
}

span:nth-child(odd) { --delay: 123ms; }
span:nth.........完整代码请登录后点击上方下载按钮下载查看