css实现—时钟动画效果

学徒在修行

已于 2022-09-04 16:38:42 修改

阅读量750

点赞数 4

文章标签： css css3 html

于 2022-09-03 19:07:05 首次发布

本文链接：https://blog.csdn.net/m0_53394907/article/details/126681226

版权

1实现效果

二、源码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}/* 清楚默认效果 */
			.clock{
				width: 350px;
				height: 350px;
				margin: 30px auto;
				border-radius:50%;
				border: 3px black solid;
				position: relative;
				background-image: url(../时钟背景.jpg);
				background-size: cover;
			}/* 设置时钟外表和相对定位 */
			.clock > div{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}/* 设置时钟的直接子元素居中 */
			/* 小时 */
			.hour-warpper{
				width: 70%;
				height: 70%;
				animation: run 43200s linear infinite ;
			}
			.hour{
				height: 50%;
				width:7px;
				background-color: black;
				margin: 0 auto;/* 图片原因，导致中心偏下 */
			}
			/* 分钟 */
			.min-warpper{
				height: 80%;
				width: 80%;
			    animation: run 3600s infinite ;
			}
			.min{
				margin: 0 auto;
				height: 50%;
				width: 3px;
				background-color: blue;
			}
			/* 秒钟 */
			.sec-warpper{
				width: 90%;
				height: 90%;	
				animation: run 60s infinite steps(60);
			}
			.sec{
				margin: 0 auto;
				height: 50%;
				width: 2px;
				background-color: red;	
			}
			/* 动画 */
			@keyframes run{
				from{
					transform: rotateZ(0);
				}
				to{
					transform: rotateZ(1turn);
				}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="hour-warpper">
				<div class="hour">
				</div>
			</div>
			
			<div class="min-warpper">
				<div class="min">
				</div>
			</div>
			<div class="sec-warpper">
				<div class="sec"></div>
			</div>
		</div>
	</body>
</html>

不喜勿噴。