Javascript实现电子时钟走动

关注重工黑大帅，学习不迷路

先看效果图：

style.css:

/* CSS Document */
*{
   
	margin: 0;
	padding: 0;
}
ul,li,ol{
   
	list-style: none;
}
body{
   
	font-family: Arial,"Microsoft YaHei","SimSun";
}
.clears{
   
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
a{
   
	text-decoration: none;
}
.ele_clock{
   
	text-align: center;
	margin-left:auto;
	margin-right:auto;
    margin-top:200px ;
	border: 5px solid aqua;
	border-radius: 50px;
	width: 340px;
	height: 100px;
	padding-top: 40px;
	padding-right: 20px;
	animation:Ani 0.5s  infinite  alternate both;
	overflow: hidden;
}
@keyframes Ani{
   
	0%{
   
		opacity: 0;
		transform:   rotateZ(360deg);
	}
	50%{
   
		opacity: 1;
		transform:  rotateZ(0);
	}
	100%{
   
		opacity: 1;
		transform:  rotateZ(0);
	}
}
.dot{
   
		animation:shan 0.5s  infinite  alternate both;
	}
	@keyframes shan{
   
		0%{
   
			 opacity:1;
			}
		100%{
   
			 opacity:0;
			}
	}