SVG HTML+SVG+JS创意圆环数字时钟动画

css文件夹下的googleapis_latin.css

@font-face {
  font-family: 'Fascinate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fascinate'), local('Fascinate-Regular'), url(https://fonts.gstatic.com/s/fascinate/v9/z7NWdRrufC8XJK0IIElS07zR.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

style.css

* {
  position: relative;
}
body {
  font-family: 'Fascinate', cursive;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction:column;
  height:100vh;
  padding:0;
  margin:0;
  background: #21034f;
  background: radial-gradient(ellipse at center, #21034f 0%,#21034f 53%,#10012b 100%);;
}
svg {
  width:500px;
}
circle {
  fill: none;
  stroke: #7f00f566;
  stroke-width: 6px;
}
.hour {
  stroke: #ff0;
  stroke-dasharray: .5px 11.5px ;
  stroke-linecap: round;
}
.min {
  stroke: #ff0;
  stroke-dasharray: .1px 59.9px;
  stroke-linecap: round;
}
.sec {
  stroke: #ff0;
  stroke-dasharray: .1px 59.9px;
  stroke-dashoffset: 15px;
  stroke-linecap: round;
}
.time {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -75%);
  color: #fffb;
}

.dwf {
  position:fixed;
  bottom:4px;
  right:10px;
  background-color:#0003;
  padding:3px;
  border-radius:3px;
  font-size:14px;
  font-family: Arial, Helvetica;
  color: #fffa;
}
.dwf a {
  color: #fffa;
  text-decoration:none
}

script.cs

var start = null;
var timeEle = document.querySelector('.time');

function update(timestamp) {
  if (!start) start = timestamp;
  let d = new Date();
  let secs = d.getSeconds();
  let sec = document.querySelector('.sec');
  var s = 60 - secs + 15;
  sec.setAttribute("style", "stroke-dashoffset: " + s + "px;");

  let mins = d.getMinutes();
  let min = document.querySelector('.min');
  var m = 60 - mins + 15;
  min.setAttribute("style", "stroke-dashoffset: " + m + "px;");

  let hours = d.getHours();
  let hou = document.querySelector('.hour');
  var h = 12 - hours + 3.5;
  hou.setAttribute("style", "stroke-dashoffset: " + h + "px;");

  let time = ("00" + hours).slice(-2) + ":" + ("00" + mins).slice(-2) + ":" + ("00" + secs).slice(-2);
  timeEle.innerHTML = time;

  console.log(time);

  var progress = timestamp - start;
  //console.log('SEC'+progress)
  //if (progress < 7000) {
  window.requestAnimationFrame(update);
  //}
}

window.requestAnimationFrame(update);

html代码：

    
    
    

    
        

	    
19:02:33