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

最新推荐文章于 2023-05-11 11:27:34 发布

豆皮没有豆

最新推荐文章于 2023-05-11 11:27:34 发布

阅读量277

点赞数

分类专栏： HTML+CSS+SVG+VUE 文章标签： svg xml

本文链接：https://blog.csdn.net/qq_43434300/article/details/108196395

版权

HTML+CSS+SVG+VUE 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

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代码：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
    <title>HTML5圆环数字时钟特效</title>
    <link rel="stylesheet" href="css/googleapis_latin.css">
    <link rel="stylesheet" href="css/style.css">
</head>
    <body>
        <div>
	    <div class="time">19:02:33</div>
	    <svg id="menu" viewBox='0 0 100 100'>
                <defs>
		    <filter id="blur" x="-10" y="-10" width="120" height="120">
		        <feGaussianBlur in="SourceGraphic" stdDeviation=".4" />
		    </filter>
		    <filter id="blur2" x="-10" y="-10" width="120" height="120">
			<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
		    </filter>
	        </defs>
		<circle class="grey" cx="50" cy="50" r="40" pathlength="12"></circle>
		<circle class="grey" cx="50" cy="50" r="31" pathlength="60"></circle>
		<circle class="grey" cx="50" cy="50" r="22" pathlength="60"></circle>
		<g filter="url(#blur2)">
		    <circle class="hour" cx="50" cy="50" r="40" pathlength="12"></circle>
	            <circle class="min" cx="50" cy="50" r="31" pathlength="60"></circle>
		    <circle class="sec" cx="50" cy="50" r="22" pathlength="60"></circle>
		</g>
	    </svg>
        </div>
        <script  src="js/script.js"></script>
    </body>
</html>

豆皮没有豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
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/z7NWdRrufC8XJK0IIElS
复制链接

扫一扫