html5+css3时钟效果案例

最新推荐文章于 2024-08-01 16:15:33 发布

写代码的小珊子

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量352

点赞数

分类专栏： html5+css

本文链接：https://blog.csdn.net/weixin_44759289/article/details/101392853

版权

html5+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.clock{
				width: 300px;
				height: 300px;
				border: 10px solid #ccc;
				/*border-radius: 160px;*/
				border-radius: 50%;
				margin: 100px auto;
				position: relative;
			}
			.line{
				width: 8px;
				height: 300px;
				background-color: #ccc;
				position: absolute;
				/*参照父容器*/
				left: 50%;
				top: 0;
				/*参照元素本身*/
				transform: translate(-50%,0);
			}
			.line1,.lin4{
				width: 10px;
			}
			.line2{
				transform: translate(-50%,0) rotate(30deg);
			}
			.line3{
				transform: translate(-50%,0) rotate(60deg);
			}
			.line4{
				transform: translate(-50%,0) rotate(90deg);
			}
			.line5{
				transform: translate(-50%,0) rotate(120deg);
			}
			.line6{
				transform: translate(-50%,0) rotate(150deg);
			}
			.cover{
				width: 250px;
				height: 250px;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			.hour{
				width: 6px;
				height: 80px;
				background-color: red;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-100%);
				transform-origin: center bottom;
				animation:clockAnimation 43200s liner infinite ;
			}
			.minute{
				width: 4px;
				height: 90px;
				background-color: green;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-100%);
				transform-origin: center bottom;
				animation:clockAnimation 3600s liner infinite ;
			}
			.second{
				width: 2px;
				height: 100px;
				background-color: blue;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-100%);
				
				/*设置旋转轴心*/
				transform-origin: center bottom; 
				/*添加动画*/
				animation:clockAnimation 60s infinite steps(60);
				/*step(60)与animation-timing-function的其他属性冲突，有liner就不能有step（60）*/
				/*animation-timing-function: steps(60);*/
			}
			
			.center{
				width: 20px;
				height: 20px;
				background-color: #ccc;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			/*创建动画*/
			@keyframes clockAnimation{
				from{
					transform:translate(-50%,-100%) rotate(0deg);
				}
				to{
					transform:translate(-50%,-100%) rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="line line1"></div>
			<div class="line line2"></div>
			<div class="line line3"></div>
			<div class="line line4"></div>
			<div class="line line5"></div>
			<div class="line line6"></div>
			<div class="cover"></div>
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="center"></div>
		</div>
	</body>
</html>