SOURCE

console 命令行工具 X clear

                    
>
console
var $clock = document.getElementsByClassName("clock")[0];
function InitClockTime() {
  var time = new Date();
  var hour = time.getHours() % 12;
  var minute = time.getMinutes();
  var second = time.getSeconds();
  if(hour < 3 ) {
    $clock.getElementsByClassName("hour-b")[0].style.transformOrigin = "100% 100%"; 
  } else {
    $clock.getElementsByClassName("hour-b")[0].style.transformOrigin = "50% 100%";
  }
  var hourDeg = hour * 30 + 30 * minute / 60;
   var mutinueDeg = minute * 6;
   var secondDeg = second * 6;
  $clock.getElementsByClassName("hour-b")[0].style.transform = "rotate("+hourDeg+"deg)";
  $clock.getElementsByClassName("minute-b")[0].style.transform = "rotate("+mutinueDeg+"deg)";
  $clock.getElementsByClassName("second-b")[0].style.transform = "rotate("+secondDeg+"deg)";
}
InitClockTime();
		<p>1.Clock时钟</p>
		<div class="clock">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
			<div class="five"></div>
			<div class="six"></div>
			<div class="middle-a"></div>
			<div class="hour-b"></div>
			<div class="minute-b"></div>
			<div class="second-b"></div>
		</div>
		<p>2.旋转太极图</p>
		<div class="taiji">
			<div class="yu-left"></div>
			<div class="yu-right"></div>
		</div>
.clock{
	height:200px;
	width:200px;
	border:solid 1px #999;
	border-radius:50%;
	position:relative;
	margin:auto;
	margin-top:50px;
	outline: #e6c200 ridge 8px;
	outline-offset:15px;
	background:#e5fff2;
}
.one{
 border:none;
 width:98%;
 position:absolute;
 top:50%;
 transform: rotate(-60deg);
}
.one:before{
 content:"7";
 position:absolute;
 top:-13px;
 left:2%;
 transform: rotate(60deg);
}
.one:after{
 content:"1";
 position:absolute;
 top:-13px;
 right:0%;
 transform: rotate(60deg);
}
.two{
 border:none;
 width:98%;
 position:absolute;
 top:50%;
 transform: rotate(-30deg);
}
.two:before{
 content:"8";
 position:absolute;
 top:-13px;
 left:2%;
 transform: rotate(30deg);
}
.two:after{
 content:"2";
 position:absolute;
 top:-13px;
 right:0%;
 transform: rotate(30deg);
}
.three{
 border:none;
 width:98%;
 position:absolute;
 top:50%;
 border:0px solid #ddd;
}
.three:before{
 content:"9";
 position:absolute;
 top:-13px;
 left:2%;
}
.three:after{
 content:"3";
 position:absolute;
 right:0%;
 top:-13px;
}
.four{
 border:none;
 width:98%;
 position:absolute;
 top:50%;
 transform: rotate(30deg);
}
.four:before{
 content:"10";
 position:absolute;
 top:-13px;
 left:2%;
 transform: rotate(-30deg);
}
.four:after{
 content:"4";
 position:absolute;
 right:0%;
 top:-13px;
 transform: rotate(-30deg);
}
.five{
 border:none;
 width:98%;
 position:absolute;
 top:50%;
 transform: rotate(60deg);
}
.five:before{
 content:"11";
 position:absolute;
 top:-13px;
 left:2%;
 transform: rotate(-60deg);
}
.five:after{
 content:"5";
 position:absolute;
 right:0%;
 top:-13px;
 transform: rotate(-60deg);
}
.six{
 border:none;
 width:98%;
 position:absolute;
 top:50%;
 transform: rotate(90deg);
 border:0px solid #bbb;;
}
.six:before{
 content:"12";
 position:absolute;
 top:-13px;
 left:0%;
 transform: rotate(-90deg);
}
.six:after{
 content:"6";
 position:absolute;
 right:2%;
 top:-13px;
 transform: rotate(-90deg);
}
.middle-a{
 border:8px solid black;
 border-radius:50%;
 height:0px;
 width:0px;
 position:absolute;
 top:47%;
 left:47%;
 z-index:1;
}
.hour-b{
 height:20%;
 width:0px;
 border:4px solid #000033;
 position:absolute;
 top:29%;
 left:49%;
 //transform: rotate(0deg);
 transform-origin:100% 100%;
 animation: time_go 216000s infinite;
}
.hour-b:after{
	content:"";
	display:inline-block;
	position:absolute;
	bottom:100%;
	left:-8px;
	border-width: 16px 8px;
	border-style: solid;
	border-color: transparent transparent #000033 transparent;
	border-radius: 4px 0 0 4px/4px 0 0 4px;
}
.minute-b{
 width:0px;
 height:30%;
 border:2px solid #0000b3;
 position:absolute;
 bottom:50%;
 left:50%;
 transform-origin:50% 100%;
 //transform: rotate(0deg);
 animation: time_go 3600s infinite;
}
.minute-b:after{
	content:"";
	display:inline-block;
	position:absolute;
	bottom:100%;
	left:-5px;
	border-width: 12px 6px;
	border-style: solid;
	border-color: transparent transparent #0000b3 transparent;
	border-radius: 3px 0 0 3px/3px 0 0 3px;
}
.second-b{
 width:0px;
 height:38%;
 border:1px solid #009900;
 position:absolute;
 bottom:50%;
 left:50%;
 transform-origin:50% 100%;
 //transform: rotate(0deg);
 animation: time_go 60s infinite;
}
.second-b:after{
	content:"";
	display:inline-block;
	position:absolute;
	bottom:100%;
	left:-4px;
	border-width: 8px 4px;
	border-style: solid;
	border-color: transparent transparent #009900 transparent;
	border-radius: 3px 0 0 3px/3px 0 0 3px;
}
@keyframes time_go
{
	0%   {transform: rotate(0deg);}
	1.66%   {transform: rotate(6deg);}
	3.32%   {transform: rotate(12deg);}
	4.98%   {transform: rotate(18deg);}
	6.64%   {transform: rotate(24deg);}
	8.30%   {transform: rotate(30deg);}
	9.96%   {transform: rotate(36deg);}
	11.62%   {transform: rotate(42deg);}
	13.28%   {transform: rotate(48deg);}
	14.94%   {transform: rotate(54deg);}
	16.60%   {transform: rotate(60deg);}
	18.26%   {transform: rotate(66deg);}
	19.92%   {transform: rotate(72deg);}
	21.58%   {transform: rotate(78deg);}
	23.24%   {transform: rotate(84deg);}
	24.90%   {transform: rotate(90deg);}
	26.56%   {transform: rotate(96deg);}
	28.22%   {transform: rotate(102deg);}
	29.88%   {transform: rotate(108deg);}
	31.54%   {transform: rotate(114deg);}
	33.20%   {transform: rotate(120deg);}
	34.86%   {transform: rotate(126deg);}
	36.52%   {transform: rotate(132deg);}
	38.18%   {transform: rotate(138deg);}
	39.84%   {transform: rotate(144deg);}
	41.50%   {transform: rotate(150deg);}
	43.16%   {transform: rotate(156deg);}
	44.82%   {transform: rotate(162deg);}
	46.48%   {transform: rotate(168deg);}
	48.14%   {transform: rotate(174deg);}
	49.80%   {transform: rotate(180deg);}
	51.46%   {transform: rotate(186deg);}
	53.12%   {transform: rotate(192deg);}
	54.78%   {transform: rotate(198deg);}
	56.44%   {transform: rotate(204deg);}
	58.10%   {transform: rotate(210deg);}
	59.76%   {transform: rotate(216deg);}
	61.42%   {transform: rotate(222deg);}
	63.08%   {transform: rotate(228deg);}
	64.74%   {transform: rotate(234deg);}
	66.40%   {transform: rotate(240deg);}
	68.06%   {transform: rotate(246deg);}
	69.72%   {transform: rotate(252deg);}
	71.38%   {transform: rotate(258deg);}
	73.04%   {transform: rotate(264deg);}
	74.70%   {transform: rotate(270deg);}
	76.36%   {transform: rotate(276deg);}
	78.02%   {transform: rotate(282deg);}
	79.68%   {transform: rotate(288deg);}
	81.34%   {transform: rotate(294deg);}
	83.00%   {transform: rotate(300deg);}
	84.66%   {transform: rotate(306deg);}
	86.32%   {transform: rotate(312deg);}
	87.98%   {transform: rotate(318deg);}
	89.64%   {transform: rotate(324deg);}
	91.30%   {transform: rotate(330deg);}
	92.96%   {transform: rotate(336deg);}
	94.62%   {transform: rotate(342deg);}
	96.28%   {transform: rotate(348deg);}
	97.94%   {transform: rotate(354deg);}
	100.00%   {transform: rotate(360deg);}
}



.taiji{
  width:200px;
  height:200px;
  //border:solid 1px;
  margin:30px;
  animation: tajixuanzhuan 3s 25;
}
.taiji .yu-left{
  width:50%;
  height:100%;
  //border:solid 1px red;
  float:left;
  background:#e6e6e6;
  border-radius:100px 0 0 100px;
  position:relative;
}
.taiji .yu-left:after{
  display:inline-block;
  content:"";
  width:50%;
  height:50%;
  background:#262626;
  border-radius:50px 0 0 50px;
  position:absolute;
  right:-1px;
}
.taiji .yu-left:before{
  display:inline-block;
  content:"";
  width:20px;
  height:20px;
  background:#262626;
  border-radius:50%;
  position:absolute;
  right:-10px;
  bottom:40px;
  z-index:1;
}
.taiji .yu-right{
  width:50%;
  height:100%;
  //border:solid 1px blue;
  float:left;
  background:#262626;
  border-radius:0 100px 100px 0;
  position:relative;
}
.taiji .yu-right:after{
  display:inline-block;
  content:"";
  width:50%;
  height:50%;
  background:#e6e6e6;
  border-radius:0 50px 50px 0;
  position:absolute;
  left:-1px;
  bottom:0;
}
.taiji .yu-right:before{
  display:inline-block;
  content:"";
  width:20px;
  height:20px;
  background:#e6e6e6;
  border-radius:50%;
  position:absolute;
  left:-10px;
  top:40px;
}
@keyframes tajixuanzhuan
{
  10%   {transform: rotate(-36deg);}
  20%   {transform: rotate(-72deg);}
  30%   {transform: rotate(-108deg);}
  40%   {transform: rotate(-144deg);}
  50%   {transform: rotate(-180deg);}
  60%   {transform: rotate(-216deg);}
  70%   {transform: rotate(-252deg);}
  80%   {transform: rotate(-288deg);}
  90%   {transform: rotate(-324deg);}
  100%   {transform: rotate(-360deg);}
}