css3画一个运动的钟表

最新推荐文章于 2023-11-19 00:15:00 发布

夏末终秋凉

最新推荐文章于 2023-11-19 00:15:00 发布

阅读量3.2k

点赞数 3

分类专栏： html css 技术天地文章标签： css css3 html web 动画

本文链接：https://blog.csdn.net/qq545698514/article/details/53610650

版权

css 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

技术天地

6 篇文章 0 订阅

订阅专栏

思路如下

1.定义一个盒子，然后通过border-radius变为圆

2.画6条线，然后通过定位，把这6条线设置到大盒子里，作为钟表刻度

3.画一个小圆，通过定位将中间部分的线条遮住

4.画中心点和时分秒针

5.最后在设置运动一圈时分秒针的动画，大功告成

上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>钟表border-radius</title>
		<style>
			*{padding:0;margin:0;}
			/*steps(60)分段*/
			.father{
				border-radius:50%;
				border:2px solid;
				position:relative;
				height:200px;
				width:200px;
				margin:100px auto;
			}
			.line{
				width:6px;
				height:200px;
				background-color:#999;
				position:absolute;
				left:50%;
				margin-left:-3px;
			}
			.two{
				transform: rotateZ(90deg);
			}
			.three{
				transform: rotateZ(30deg);
			}
			.four{
				transform: rotateZ(60deg);
			}
			.five{
				transform: rotateZ(120deg);
			}
			.six{
				transform: rotateZ(150deg);
			}
			.box{
				background-color: #fff;
				height:150px;
				width:150px;
				border-radius: 50%;
				position:absolute;
				left:50%;
				margin-left:-75px;
				top:25px;
				z-index:2;
			}
			.circle{
				border:10px solid black;
				position:absolute;
				border-radius:50%;
				top:90px;
				left:90px;
				z-index:99;
			}
			.hour{
				width:10px;
				height:40px;
				background-color: #000;
				position:absolute;
				left:95px;
				z-index:4;
				top:60px;
				transform-origin: center bottom;
				animation:hour 43200s steps(12) 0s infinite;
			}
			.minutes{
				height:60px;
				width:8px;
				background-color: #000;
				position:absolute;
				left:96px;
				z-index:5;
				top:40px;
				transform-origin: center bottom;
				animation:minutes 3600s steps(60) 0s infinite;
			}
			.second{
				height:80px;
				width:4px;
				background-color: #f00;
				position:absolute;
				left:98px;
				z-index:6;
				top:20px;
				animation:second 60s steps(60) 0s infinite;
				transform-origin: center bottom;
			}
			@keyframes second{
				from{
					transform: rotateZ(0deg);
				}
				to{
					transform: rotateZ(360deg);
					
				}
			}
			@keyframes minutes{
				from{
					transform: rotateZ(0deg);
				}
				to{
					transform: rotateZ(360deg);
					
				}
			}
			@keyframes hour{
				from{
					transform: rotateZ(0deg);
				}
				to{
					transform: rotateZ(360deg);
					
				}
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class='one line'></div>
			<div class='two line'></div>
			<div class='three line'></div>
			<div class='four line'></div>
			<div class='five line'></div>
			<div class='six line'></div>
			<div class="box"></div>
			<div class='circle'></div>
			<div class="hour"></div>
			<div class="minutes"></div>
			<div class="second"></div>
		</div>
	</body>
</html>

夏末终秋凉

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3画一个运动的钟表

思路如下1.定义一个盒子，然后通过border-radius变为圆2.画6条线，然后通过定位，把这6条线设置到大盒子里，作为钟表刻度3.画一个小圆，通过定位将中间部分的线条遮住4.画中心点和时分秒针5.最后在设置运动一圈时分秒针的动画，大功告成上代码：钟表border-radius *{padding:0;margi
复制链接

扫一扫