利用CSS3制作一个动态时钟

最新推荐文章于 2022-05-24 10:00:06 发布

LoongYL

最新推荐文章于 2022-05-24 10:00:06 发布

阅读量782

点赞数 1

分类专栏： web 文章标签： CSS3 HTML

本文链接：https://blog.csdn.net/qq_40186421/article/details/89137794

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

设计思路：将一个盒子，通过border-radius：50%变为圆，然后画六条线通过定位平分圆，中间再画一个圆背景设置为白色，遮住多余部分。

<!DOCTYPE html>
<html>
	<head>

			<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bp{
				width: 400px;
				height: 400px;
				border: 3px solid red;
				border-radius: 50%;
				position: relative;
				margin: 100px auto;
			}
			.line{
				width: 6px;
				height: 400px;
				background-color: black;
				position:absolute;
				left: 50%;
				margin-left: -3px;
			}
			/*时钟刻度线*/
			.er{
				transform: rotateZ(90deg);
			}
			.san{
				transform: rotateZ(30deg);
			}
			.si{
				transform: rotateZ(60deg);
			}
			.wu{
				transform: rotateZ(120deg);
			}
			.liu{
				transform: rotateZ(150deg);
			}
			/*将刻度线遮住,只留一部分*/
			.box{
				width: 350px;
				height: 350px;
				border-radius: 50%;
				background-color: white;
				position: absolute;
				left: 50%;
				margin-left: -175px;
				top: 25px;
				z-index: 2;
			}
			/*制作中心的小黑点*/
			.cen{
				border: 10px solid black;
				position: absolute;
				border-radius: 50%;
				top: 190px;
				left: 190px;
				z-index: 99;
			}
			/*时针的设置*/
			.shi{
				width:10px;
				height: 140px;
				background-color: #000000;
				position: absolute;
				left: 195px;
				z-index: 4;
				top: 60px;
				/*设置旋转中心为底部中心*/
				transform-origin: center bottom;
				/*43200s一圈,分12步走完*/
				animation: move 43200s steps(12) 0s infinite;
			}
			.Fen{
				width:8px;
				height: 160px;
				background-color: black;
				position: absolute;
				left: 195px;
				z-index: 5;
				top:40px ;
				/*设置旋转中心为底部中心*/
				transform-origin: center bottom;
				/*3600s一圈,分60步走完*/
				animation: move 3600s steps(60) 0s infinite;
			}
			.miao{
				width:6px;
				height: 180px;
				background-color: black;
				position: absolute;
				left: 195px;
				z-index: 6;
				top:20px ;
				/*设置旋转中心为底部中心*/
				transform-origin: center bottom;
				/*60s一圈,分60步走完*/
				animation: move 60s steps(60) 0s infinite;
			}
			/*设置旋转从0度到360度*/
			@keyframes move{
				0%{
					transform: rotateZ(0deg);
				}
				100%{
					transform: rotateZ(360deg);
				}
			</style>
	</head>
	<body>
		<div class="bp">
			<div class="yi line"></div>
			<div class="er line"></div>
			<div class="san line"></div>
			<div class="si line"></div>
			<div class="wu line"></div>
			<div class="liu line"></div>
			<div class="box"></div>
			<div class="cen"></div>
			<div class="shi"></div>
			<div class="Fen"></div>
			<div class="miao"></div>
			
			
		</div>
	</body>
</html>

LoongYL

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用CSS3制作一个动态时钟

设计思路：将一个盒子，通过border-radius：50%变为圆，然后画六条线通过定位平分圆，中间再画一个圆背景设置为白色，遮住多余部分。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style typ...
复制链接

扫一扫