第二版本：Css+Html+Svg_3D_爱心_渐变_阴影_时钟2
在大佬的教学基础上做的更改：www.bilibili.com/video/BV1Rd…
原图：
更改过后的效果如下：
html代码实现：
<div class="clock">
<div class="numbers">
<span style="--i:0;"><b>12</b></span>
<span style="--i:1;"><b>3</b></span>
<span style="--i:2;"><b>6</b></span>
<span style="--i:3;"><b>9</b></span>
<div class="circle" id="hr"><i></i></div>
<div class="circle" id="mn"><i></i></div>
<div class="circle" id="sc"><i></i></div>
</div>
</div>
javascript代码如下：
let hr = document.querySelector('#hr');
let mn = document.querySelector('#mn');
let sc = document.querySelector('#sc');
setInterval(()=>{
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6;
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
部分css代码：
.clock .numbers span
{
position: absolute;
inset: 5px;
text-align: center;
color: #fff;
font-size: 1.25em;
transform:rotate(calc(90deg * var(--i)));
}
style="--i:0;"
定义了一个自定义属性 --i
并将其初始值设置为 0 。
自定义属性（也称为 CSS 变量）
可以在整个样式表中被复用，
通过 var() 函数来引用
.clock .numbers span b{
font-weight: 600;
display: inline-block;
transform:rotate(calc(-90deg * var(--i)));
}
.clock .numbers .circle#hr i
{
transform:scaleY(0.3);
width:4px;
}
.clock .numbers .circle#mn i
{
transform: scaleY(0.45);
}
.clock .numbers .circle#sc i
{
width: 2px;
transform: scaleY(0.55);
background: #e91e63;
box-shadow: 0 30px 0 #e91e63;
}
