css3做一个简单的时钟

最新推荐文章于 2024-09-10 10:10:13 发布

偶尔正经的小明

最新推荐文章于 2024-09-10 10:10:13 发布

阅读量1.5k

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/zhangbiaoxiaoming/article/details/83153565

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*设置时钟的样子*/
			/*最外面的边框*/
			.warp{
				width: 600px;
				height: 600px;
				/*给大的外面设置了一个从中心点的渐变*/
				background: radial-gradient(circle, white, black,red); 
				margin: 100px auto;
			    border-radius: 295px;
			}
			/*时钟里面*/
			.div1{
				width: 500px;
				height: 500px;
				background: lavender;
				position: relative;
				top: 50px;
				left: 50px;
			    border-radius: 250px;
			    
			}
			.h{
				/*作为时针*/
				width: 100px;
				height: 20px;
				background: black;
				position: absolute;
				top: 240px;
				left: 240px;
				transform: rotateZ(30deg);
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			   /*指定旋转的中心为左边*/
			   transform-origin: left center;
			   /*时间为43200s ，但这里为了看效果我设置成60s*/
			   animation: m 43200s linear infinite;
			}
			.m{
				/*作为分针*/
				width: 160px;
				height: 20px;
				background: black;
				position: absolute;
				top: 240px;
				left: 240px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			    /*指定旋转的中心为左边*/
			   transform-origin: left center;
			   /*时间为3600s ，但这里为了看效果我设置成30s*/
			   animation: m 3600s linear infinite;
			}
			.s{
				/*作为秒针*/
				width: 200px;
				height: 20px;
				background: black;
				position: absolute;
				top: 240px;
				left: 240px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			    /*指定旋转的中心为左边*/
			   transform-origin: left center;
			   /*时间为60s */
			   animation:  s 60s steps(60) infinite;
			}
			
			
			.div1_3{
				position: absolute;
				width: 50px;
				height: 50px;
				border-radius: 25px;
				top: 220px;
				left: 220px;
				background: yellow;
			}
			 .div1-4{
			 	width: 500px;
			 	height: 5px;
			 	/*background: red;*/
			 	position: absolute;
			 	top: 250px;
			 	/*把它设置成一个弹性盒子，并且让子元素两边对齐*/
			 	display: flex;
			 	justify-content: space-between;
			 	
			 }
			 /*用旋转把一个圆分成12等分*/
			 .d1{
			 	transform: rotateZ(90deg);
			 }
			 .d2{
			 	transform: rotateZ(30deg);
			 }
			 .d3{
			 	transform: rotateZ(60deg);
			 }
			 .d4{
			 	transform: rotateZ(120deg);
			 }
			 .d5{
			 	transform: rotateZ(150deg);
			 }
			 .left{
			 	width: 20px;
			 	height: 5px;
			 	background: black;
			 }
			 .right{
			 	width: 20px;
			 	height: 5px;
			 	background: black;
			 }
			 .d0>div,.d1>div{
			 	height: 10px;
			 	width: 35px;
			 }
			/*让时针分针和秒针绕右边旋转360deg*/
			@keyframes h{
			 	from{}
			 	to{ transform: rotateZ(360deg);}
			 }
			@keyframes m{
			 	from{}
			 	to{ transform: rotateZ(360deg);}
			 }
			 @keyframes s{
			 	from{}
			 	to{ transform: rotateZ(360deg);}
			 }
			
		</style>
	</head>
	<body>
	 <div class="warp">
		<div class="div1">
			<div class="h">
				
			</div>
			<div class="m">
				
			</div>
			<div class="s"></div>
			<div class="div1_3">
			</div>
			<div class="div1-4 d0">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="div1-4 d1">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="div1-4 d2">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="div1-4 d3">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="div1-4 d4">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="div1-4 d5">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	 </div>
	</body>
</html>

效果（针会动）
在这里插入图片描述