简易的时钟，CSS3动画

最新推荐文章于 2022-09-03 19:07:05 发布

公有云私有云

最新推荐文章于 2022-09-03 19:07:05 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/81206528

版权

本文只是用于练习，所以兼容性没有解决，只做谷歌的兼容，具体代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title> 时钟 </title>
  <meta charset="utf-8"/>
  <meta name="HSW" content="">
  <meta name="Keywords" content="">
  <style>
	div.d1 {
		margin-top:20px;
		width:500px;
		height:500px;
		border:6px solid #00f;
		border-radius:50%;
		position:relative;
	}
	div.d4 {
		width:8px;
		height:80px;
		background-color:red;
		position:absolute;
		top:170px;
		left:242px;
		transform-origin:4px 95px;
		-webkit-animation:fenzhen 86400s linear 0s infinite;
	}
	
	div.d2 {
		width:8px;
		height:100px;
		background-color:green;
		position:absolute;
		top:150px;
		left:242px;
		transform-origin:4px 95px;
		-webkit-animation:fenzhen 3600s linear 0s infinite;
	}
	div.d3 {
		width:5px;
		height:150px;
		background-color:blue;
		position:absolute;
		top:100px;
		left:245px;
		/*设置旋转原点坐标*/
		transform-origin:2.5px 145px;
		-webkit-animation:miaozhen 60s linear 0s infinite;
	}
	@-webkit-keyframes miaozhen {
		from{
			transform:rotate(0deg);
		}to{
			transform:rotate(360deg);
		}
	}
	@-webkit-keyframes fenzhen {
		from{
			transfom:rotate(0);
		}to{
			transform:rotate(360deg);
		}
	}
	div[id^="a"]{
		position:absolute;
		font-size:.5em; text-align:center;
		width:7px; height:5px;
		top:0; left: 245px;
		transform-origin:50% 250px;
	}
	#a4,#a8{font-size:.4em; font-weight:bold}
	#a1{transform:rotate(30deg)}
	#a2{transform:rotate(60deg)}
	#a3{transform:rotate(90deg)}
	#a4{transform:rotate(120deg)}
	#a5{transform:rotate(150deg)}
	#a6{transform:rotate(180deg)}
	#a7{transform:rotate(210deg)}
	#a8{transform:rotate(240deg)}
	#a9{transform:rotate(270deg)}
	#a10{transform:rotate(300deg)}
	#a11{transform:rotate(330deg)}
  </style>
 </head>

 <body>
	 <div class="d1">
		<div class="d4"></div>
		<div class="d3"></div>
		<div class="d2"></div>
		<div id="a1">I</div>
		<div id="a2">II</div>
		<div id="a3">III</div>
		<div id="a4">IIII</div>
		<div id="a5">V</div>
		<div id="a6">VI</div>
		<div id="a7">VII</div>
		<div id="a8">VIII</div>
		<div id="a9">IX</div>
		<div id="a10">X</div>
		<div id="a11">XI</div>
		<div id="a12">XII</div>
	 </div>
 </body>
</html>