<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>
使用CSS的@property制作电子时钟
于 2022-05-10 14:45:39 首次发布