CSS如何获取当前时间？

如我们所知，CSS本身并不具备获取当前时间的能力，但是我们可以借助一些技巧来实现。

方法1：利用Javascript获取时间并在CSS中引用

我们可以通过Javascript的Date对象来获取当前时间，并在CSS中使用var()函数引用。具体步骤如下：在Javascript中定义一个变量time，获取当前时间var time = new Date();创建一个CSS变量，使用var()函数引用Javascript变量time，并将其设置为样式属性:root {--current-time: var(--delay) calc((1s * var(--hours)) + (1m * var(--minutes)) + var(--seconds));}在CSS中使用var()函数引用该变量，以展示实时时间.container:after {content: var(--current-time);font-size: 2rem;}

方法2：使用CSS动画展示流逝的时间

我们可以利用CSS的animation动画属性实现展示流逝的时间。具体步骤如下：在CSS中定义一个动画时间线，指定其从0到60秒的时间段@keyframes sweep {0% {transform: rotate(0deg);}100% {transform: rotate(354deg);}}定义一个伪元素并在其上应用动画和样式属性.container:after {content: '';position: absolute;top: 50%;left: 50%;width: 90px;height: 90px;transform: translate(-50%, -50%);border-radius: 50%;border: 8px solid #000;animation: sweep 60s linear forwards;}

以上两种方法均可以实现展示时间的效果，开发者可以根据实际需求选择使用。