使用CSS的@property制作电子时钟

<template>
  <div class="time">
    <span class="hour"></span>
    <a class="split">:</a>
    <span class="minute"></span>
    <a class="split">:</a>
    <span class="seconds"></span>
  </div>
</template>

<script>

export default {
  name: 'CSSDate',
  data () {
    return {
    }
  },
  mounted () {
    const d = new Date()
    const hour = d.getHours();
    const minute = d.getMinutes();
    const seconds = d.getSeconds();
    document.body.style.setProperty('--ds', seconds) // 修改变量--ds的值
    document.body.style.setProperty('--dm', minute + seconds / 60) // 修正偏移量
    document.body.style.setProperty('--dh', hour + minute / 60 + seconds / 3600)

  },
  methods: {

  }
}
</script>

<style scoped>
:root {
  --dh: 19;
  --dm: 26;
  --ds: 30;
}
@property --h {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --m {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@keyframes hour {
  to {
    --h: 24;
  }
}
@keyframes minute {
  to {
    --m: 60;
  }
}
@keyframes seconds {
  to {
    --s: 60;
  }
}
.hour::after {
  counter-reset: hour var(--h);
  content: counter(hour, decimal-leading-zero); /*添加计数器样式 补零*/
  animation: hour calc(60s * 60 * 24) infinite steps(24);
  animation-delay: calc(-60s * 60 * var(--dh)); /* 初始值 */
}
.minute::after {
  counter-reset: minute var(--m);
  content: counter(minute, decimal-leading-zero);
  animation: minute calc(60s * 60) infinite steps(60);
  animation-delay: calc(-60s * var(--dm));
}
.seconds::after {
  counter-reset: seconds var(--s);
  content: counter(seconds, decimal-leading-zero);
  animation: seconds 60s infinite steps(60);
  animation-delay: calc(-1s * var(--ds));
}

/* 闪烁的分隔符 */
@keyframes shark {
  0%, 100%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
}
.split{
  animation: shark 1s step-end infinite;
}
</style>