animation 中的 steps() 的使用做一个时钟

最新推荐文章于 2022-03-04 19:58:09 发布

Wrj6811

最新推荐文章于 2022-03-04 19:58:09 发布

阅读量289

点赞数

分类专栏： css 前端小功能文章标签： css animation

本文链接：https://blog.csdn.net/Wrj6811/article/details/102596851

版权

前端小功能同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
				left: 50%;
				top: 100px;
				transform: translateX(-250px);
			}
			.div1{
				height: 20px;
				width: 120px;
				border-radius: 10px;
				background-color: black;
				position: absolute;
				left: 735px;
				top: 350px;
				transform-origin: 10% 50%;
				animation:hour 24*3600s steps(24) infinite;
			}
			.div2{
				height: 20px;
				width: 160px;
				border-radius: 10px;
				background-color: cyan;
				position: absolute;
				left: 735px;
				top: 350px;
				transform-origin: 10% 50%;
				animation:minute 3600s steps(60) infinite;
			}
			.div3{
				height: 20px;
				width: 180px;
				border-radius: 20px;
				background-color: red;
				position: absolute;
				left: 735px;
				top: 350px;
				transform-origin: 10% 50%;
				animation:second 60s steps(60) infinite;
			}
			@keyframes hour{
			0%{transform:rotate(0)}
			100%{transform:rotate(360deg)}
			}
			@keyframes minute{
			0%{transform:rotate(0)}
			100%{transform:rotate(360deg)}
			}
			@keyframes second{
				0%{transform:rotate(0)}
				100%{transform:rotate(360deg)}
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../lib/image/时钟.png" >
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
		</div>
	</body>
</html>