2020-09-23

最新推荐文章于 2024-09-14 08:09:14 发布

学游泳的飞鱼

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量122

点赞数

文章标签： css css3 html javascript

本文链接：https://blog.csdn.net/qq_45140055/article/details/108753825

版权

用纯css+js打造（爱的魔力转圈圈的时钟）指针时钟

在这里插入图片描述

                                      这里是完成以后的效果图

下面直接上菜！！！！！！！！！！！！！！！！！！！！！！！！！！
由于代码量不多，我把css和js都放在了一块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			background-color: #424242;
			margin: 0;
			padding: 0;
		}
		.containers{
			width: 350px;
			height: 350px;
			box-shadow: 15px 15px 10px #5e5e5e,-15px -15px 10px #0c0c0c;
			margin: 0px auto;
			margin-top: 100px;
			border-radius: 50%;
		}
		.containers::before{
			position: absolute;
		content: "";
		width: 350px;
		height: 350px;
		box-shadow: 15px 15px 10px #5e5e5e,-15px -15px 10px #0c0c0c;
		margin: 0px auto;
		border-radius: 50%;
		filter: blur(2px);
		}
		.clock{
			width: 350px;
			height: 350px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.dot{
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background-color: #ea3609;
			position: absolute;
			z-index:999;
		}
	 .clock .hour,
	 .clock .minute,
	 .clock .second{
		 position: absolute;
		 display: flex;
		 border-radius: 50%;
		 justify-content: center;
	 }
	 .clock .hour{
		 width: 180px;
		 height: 180px;
		 display: flex;
		 z-index: 11;
	 }
	 .clock .hour::before{
		 content: "";
		 width: 8px;
		 height: 100px;
		 background-color: #ff5101;
		 position: absolute;
		 border-radius: 10px 10px 0 0;
	 }
	 .clock .minute{
		 width: 220px;
		 height: 220px;
		 z-index: 12;
	 }
	 .clock .minute::before{
		 content: "";
		 width: 6px;
		 height: 130px;
		 background-color: #ffffff;
		 position: absolute;
		 border-radius: 10px 10px 0 0;
	 }
	 .clock .second{
		 width: 260px;
		 height: 260px;
		 z-index: 13;
	 }
	 .clock .second::before{
		 content: "";
		 width: 2px;
		 height: 170px;
		 background-color: #FB7299;
		 position: absolute;
		 border-radius: 10px 10px 0 0;
	 }
	 .clock .mark{
		 position: absolute;
		 width: 8px;
		 height: 8px;
		 border-radius: 50%;
		 background-color: #BE3B25;
	 }
	 .clock .mark::before{
		 content: "";
		 position: absolute;
		 width: 8px;
		 height: 8px;
		 border-radius: 50%;
		  background-color: #ff0000;
			filter: blur(6px);
	 }
	 .clock .mark-1{
		 width: 12px;
		 height: 12px;
		 transform: translateY(-160px);
	 }
	 .clock .mark-2{
		transform: rotate(30deg) translateY(-160px);
	 }
	 .clock .mark-3{
	 		transform: rotate(60deg) translateY(-160px);
	 }
	 .clock .mark-4{
		 width: 12px;
		 height: 12px;
	 		transform: rotate(90deg) translateY(-160px);
	 }
	 .clock .mark-5{
	 		transform: rotate(120deg) translateY(-160px);
	 }
	 .clock .mark-6{
	 		transform: rotate(150deg) translateY(-160px);
	 }
	 .clock .mark-7{
		 width: 12px;
		 height: 12px;
	 		transform: rotate(180deg) translateY(-160px);
	 }
	 .clock .mark-8{
	 		transform: rotate(210deg) translateY(-160px);
	 }
	 .clock .mark-9{
	 		transform: rotate(240deg) translateY(-160px);
	 }
	 .clock .mark-10{
		 width: 12px;
		 height: 12px;
	 		transform: rotate(270deg) translateY(-160px);
	 }
	 .clock .mark-11{
	 		transform: rotate(300deg) translateY(-160px);
	 }
	 .clock .mark-12{
	 		transform: rotate(330deg) translateY(-160px);
	 }
	</style>
	<body>
		 <div class="containers">
			  <div class="clock">
					<div class="dot"></div>
					<div class="hour"></div>
					<div class="minute"></div>
					<div class="second"></div>
					<div class="mark mark-1"></div>
					<div class="mark mark-2"></div>
					<div class="mark mark-3"></div>
					<div class="mark mark-4"></div>
					<div class="mark mark-5"></div>
					<div class="mark mark-6"></div>
					<div class="mark mark-7"></div>
					<div class="mark mark-8"></div>
					<div class="mark mark-9"></div>
					<div class="mark mark-10"></div>
					<div class="mark mark-11"></div>
					<div class="mark mark-12"></div>
				</div>
		 </div>
		 <script>
			 const hour = document.querySelector(".hour");
			 const min = document.querySelector(".minute");
			 const sec = document.querySelector(".second");
			 setInterval(() => {
			   let day = new Date();
			   let hh = day.getHours();
			   let mm = day.getMinutes();
			   let ss = day.getSeconds() * 6;
			   hour.style.transform = `rotateZ(${hh * 30 + mm / 2}deg)`;
			   min.style.transform = `rotateZ(${mm * 6}deg)`;
			   sec.style.transform = `rotateZ(${ss}deg)`;
			   if (mm < 10) {
			     mm = `0${mm}`;
			   }
			  /* time.innerHTML = `${hh}:${mm}`; */
			 });
		 </script>
	</body>
</html>