简易基础动态时钟

最新推荐文章于 2023-06-21 20:37:46 发布

锅絮不是我

最新推荐文章于 2023-06-21 20:37:46 发布

阅读量128

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/myx20220713/article/details/126472109

版权

基础动态时钟

摘要由CSDN通过智能技术生成

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.dd{
				width: 280px;
				height: 280px;
				/* margin:  0 auto; */
				background-image: url(img/clock.png);
				position: relative;
			}
			.dd::before{
				content: '';
				width: 20px;
				height: 20px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			.dd::after{
				content: '';
				width: 2px;
				height: 30%;
				background-color: black;
				position: absolute;
				top: 20%;
				left: 50%;
				transform: translateX(-50%);
				transform-origin: bottom;
				transition-duration: 60s;
				transition-timing-function: steps(60,start);
			}
			.dd:hover::after{
				transform: translateX(-50%) rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="dd"></div>
	</body>
</html>

效果图