CSS3实现时钟转动效果

最新推荐文章于 2023-01-05 09:27:04 发布

啊喂啊阿薇

最新推荐文章于 2023-01-05 09:27:04 发布

阅读量446

点赞数 1

文章标签： CSS3

本文链接：https://blog.csdn.net/qq_35555295/article/details/100152638

版权

<!DOCTYPE html>
<html>
<head>
	<title>clock</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.clock{
			width: 200px;
			height: 200px;
			margin: 50px auto;
			border: 10px solid #000;
			border-radius: 50%;
			position: relative;
		}
		.line{
			height: 200px;
			width: 8px;
			background-color: gray;
			position: absolute;
			left: 50%;
			margin-left: -4px;
		}
		.line1,.line2,.line3,.line4{
			width: 4px;
			margin-left: -2px;
		}
		.line1{
			transform: rotate(30deg);
		}
		.line2{
			transform: rotate(-30deg);
		}
		.line3{
			transform: rotate(60deg);
		}
		.line4{
			transform: rotate(-60deg);
		}
		.line5{
			transform: rotate(90deg);
		}
		.white-circle{
			width: 170px;
			height: 170px;
			background-color: #fff;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top:50%;
			margin-left: -85px;
			margin-top: -85px;

		}
		.black-pot{
			width: 14px;
			height: 14px;
			position: absolute;
			background-color: #000;
			top:50%;
			left: 50%;
			margin: -7px 0 0 -7px;
			border-radius: 50%;
			z-index: 1;
		}
		.hour{
			position: absolute;
			width: 55px;
			height: 6px;
			background-color: #000;
			right: 50%;
			top:50%;
			margin-top: -3px;
			border-radius: 5px;
			transform-origin: right;
			/*设置旋转圆点 常和动画一起配合使用 营造旋转效果*/
			animation: tick-tock 43200s steps(60,end) infinite;
		}
		.minute{
			width: 6px;
			height: 70px;
			bottom: 50%;
			left: 50%;
			margin-left: -3px;
			background-color: #000;
			position: absolute;
			border-radius: 5px;
			transform-origin: bottom;
			animation: tick-tock 3600s steps(60,end) infinite;
		}
		.second{
			width: 2px;
			height: 80px;
			bottom: 50%;
			left: 50%;
			margin-left: -1px;
			background-color: red;
			position: absolute;
			transform-origin: bottom;
			animation: tick-tock 60s steps(60,end) infinite;
		}
		@keyframes tick-tock{
			to{transform:rotate(360deg);}
		}
	</style>
</head>
<body>
	<div class="clock">
		<div class="line"></div>
		<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="white-circle"></div>
		<div class="black-pot"></div>
		<div class="hour"></div>
		<div class="minute"></div>
		<div class="second"></div>

	</div>
</body>
</html>

啊喂啊阿薇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现时钟转动效果

<!DOCTYPE html><html><head> <title>clock</title> <meta charset="utf-8"> <style type="text/css"> body{ margin: 0; padding: 0; } .clock{ wi...
复制链接

扫一扫