Css+Html+Svg_3D_爱心_渐变_阴影_时钟2

这次我会用gif格式在文章上面展示了！

第一版：[Css+Html+Svg_3D_爱心_渐变_阴影_时钟1]

下图是最新版本

关键代码段如下所示：

div部分：

<div class="time" id="time">
          <div class="circle">
            <div class="dots hr_dot" style="--clr:#03367d"></div>
            <svg  style="--clr:#2196f3">
              <circle cx="110" cy="110" r="65"  id="hh"></circle>
            </svg>
          </div>
          <div class="circle" style="--clr:#a41dde">
            <div class="dots min_dot"></div>
            <svg>
              <circle cx="110" cy="110" r="80" id="mm">
            </circle>
            </svg>
          </div>
          <div class="circle" style="--clr:#d39de9">
            <div class="dots sec_dot"></div>
            <svg>
              <circle cx="110" cy="110" r="113" id="ss"></circle>
            </svg>
          </div>
        </div>

CSS部分:

 #time .circle svg circle 
 {
   width: 100%;
   height: 100%;
   fill: transparent;
   stroke: var(--clr);
   stroke-width: 3;
   transform: translate(5px,5px);
   opacity:0.8;  
 }
 
#time .circle:nth-child(1) svg circle 
{
	stroke-dasharray: 510;
	stroke-dashoffset: 510;
}
#time .circle:nth-child(2) svg circle 
{
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
}
#time .circle:nth-child(3) svg circle 
{
	stroke-dasharray: 760;
  stroke-dashoffset: 760;
}

javascript部分：

let sec_dot = document.querySelector('.sec_dot');
let min_dot = document.querySelector('.min_dot');
let hr_dot = document.querySelector('.hr_dot');

let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
hh.style.strokeDashoffset = 510 - (510 * h) / 12;
// 12 hrs clock
mm.style.strokeDashoffset = 500 - (500 * m) / 60;
// 60 minutes
ss.style.strokeDashoffset = 760 - (760 * s) / 60;
// 60 seconds
hr.style.transform = `rotateZ(${h * 30}deg)`;
mn.style.transform = `rotateZ(${m * 6}deg)`;
sc.style.transform = `rotateZ(${s * 6}deg)`;

总结：已解决！！！开心♥

源码链接：

gitee:gitee.com/chengyuejia…

github:github.com/Chengyuejia…