CSS+JS表

最新推荐文章于 2024-08-10 10:42:27 发布

real_xiaobai

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量233

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/real_xiaobai/article/details/124708685

版权

CSS3 动画 3D效果时钟动态更新

关键词由CSDN通过智能技术生成

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: black;
			}
			#watch .frame-face {
			  position: relative;
			  width: 30em;
			  height: 30em;
			  margin: 2em auto;
			  border-radius: 15em;
			  background: -webkit-linear-gradient(top, #f9f9f9, #666);
			  background: -moz-linear-gradient(top, #f9f9f9, #666);
			  background: linear-gradient(top, #f9f9f9, #666);
			  box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
			}
			#watch .frame-face:after {
			  content: '';
			  width: 28em;
			  height: 28em;
			  border-radius: 14.2em;
			  position: absolute;
			  top: .9em;
			  left: .9em;
			  box-shadow: inset rgba(0, 0, 0, .2) .2em .2em 1em;
			  border: .1em solid rgba(0, 0, 0, .2);
			  background: -webkit-linear-gradient(top, #fff, #ccc);
			  background: -moz-linear-gradient(top, #fff, #ccc);
			  background: linear-gradient(top, #fff, #ccc);
			}
		
			
			#watch .frame-face:before {
			  content: '';
			  width: 29.4em;
			  height: 29.4em;
			  border-radius: 14.7em;
			  position: absolute;
			  top: .3em;
			  left: .3em;
			  background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
			  background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
			  background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
			}
			#minute-marks li {
			  display: block;
			  width: 0.2em;
			  height: 0.6em;
			  background: #929394;
			  position: absolute;
			  top: 37%;
			  left: 50%;
			  margin: -0.4em 0 0 -0.1em;
			}
			#digits {
			    width: 30em;
			    height: 30em;
			    border-radius: 15em;
			    position: absolute;
			    top: 0;
			    left: 50%;
			    margin-left: -15em;
			}
			#digits li {
			  font-size: 1.6em;
			  display: block;
			  width: 1.6em;
			  height: 1.6em;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  line-height: 1.6em;
			  text-align: center;
			  margin: -.8em 0 0 -.8em;
			  font-weight: bold;
			}
			
			#digits li:nth-child(1) {
			  transform: translate(7em, 0)
			}
			
			#digits li:nth-child(2) {
			  transform: translate(0, 7em)
			}
			
			#digits li:nth-child(3) {
			  transform: translate(-7em, 0)
			}
			
			#digits li:nth-child(4) {
			  transform: translate(0, -7em)
			}
			
			#digits:before {
			  content:'';
			  width:1.6em;
			  height:1.6em;
			  border-radius:.8em;
			  position:absolute;
			  top:50%; left:50%;
			  margin:-.8em 0 0 -.8em;
			  background:#121314;
			}
			#digits:after {
			  content:'';
			  width:4em;
			  height:4em;
			  border-radius:2.2em;
			  position:absolute;
			  top:50%; left:50%;
			  margin:-2.1em 0 0 -2.1em;
			  border:.1em solid #c6c6c6;
			  background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
			  background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
			  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
			}
			
			
			#watch .hours-hand {
			    width:.8em;
			    height:7em;
			    border-radius:0 0 .9em .9em;
			    background:#232425;
			    position:absolute;
			    bottom:50%; left:50%;
			    margin:0 0 -.8em -.4em;
			    box-shadow:#232425 0 0 2px;
			    transform-origin:0.4em 6.2em;
			    transform:rotate(-25deg);
			}
			#watch .hours-hand:before {
			    content:'';
			    background:inherit;
			    width:1.8em;
			    height:.8em;
			    border-radius:0 0 .8em .8em;
			    box-shadow:#232425 0 0 1px;
			    position:absolute;
			    top:-.7em; left:-.5em;
			}
			#watch .hours-hand:after {
			    content:'';
			    width:0; height:0;
			    border:.9em solid #232425;
			    border-width:0 .9em 2.4em .9em;
			    border-left-color:transparent;
			    border-right-color:transparent;
			    position:absolute;
			    top:-3.1em; left:-.5em;
			}
			#watch .minutes-hand {
			    width:.8em;
			    height:12.5em;
			    border-radius:.5em;
			    background:#343536;
			    position:absolute;
			    bottom:50%; left:50%;
			    margin:0 0 -1.5em -.4em;
			    box-shadow:#343536 0 0 2px;
			    transform-origin:0.4em 11em;
			}
		
/* 秒针 */
#watch .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
}
#watch .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}
		</style>
	</head>
	<body>
		  <div id="watch">
		    <!-- 表盘 -->
		    <div class="frame-face"></div>
			<ul id="minute-marks"></ul>
			<ul id="digits">
			  <li>3</li>
			  <li>6</li>
			  <li>9</li>
			  <li>12</li>
			</ul>
			<!-- 指针 -->
			    <div class="hours-hand"></div>
			    <div class="minutes-hand"></div>
			    <div class="seconds-hand"></div>
		  </div>
		  <!-- 刻度 -->
		      
	</body>
	<script>
		window.onload = function () {
		  // 生成刻度
		  let markWrap = document.getElementById('minute-marks')
		
		  for (let index = 0; index < 60; index++) {
		    let markItem = document.createElement('li')
		    markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)";
		    if (index % 5 == 0) {
		      markItem.style.width = "0.3em";
		      markItem.style.height = "1em";
		    }
		    markWrap.appendChild(markItem)
		  }
		}
	
		
		setInterval(function () {
		    var time = new Date();
		    var hour = time.getHours()
		    var minute = time.getMinutes();
		    var second = time.getSeconds();
		    var hournum;
		    if (hour > 12) {
		      hournum = ((hour - 12) + minute / 60) * 30;
		    } else {
		      hournum = (hour + minute / 60 * 100) * 30;
		    }
		    var minnum = (minute + second / 60) * 6 + second / 60;
		    var sennum = second * 6;
		    document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)"
		    document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)"
		    document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)"
		  }, 1000);
	</script>
</html>