实现一个秒针效果

分别设置动画名称、动画持续时间、动画播放函数、动画循环、旋转基准点

.item{

background: black;

width:6px;

height:200px;

border-radius:50%;

position: absolute;

left:50%;

margin-left: -3px;

animation-name: rotateCircle;

animation-duration:60s;

/* 一秒一转 */

animation-timing-function:steps(60);

/* 匀速 */

animation-timing-function: linear; 

/* 无限播放 */

animation-iteration-count: infinite;

/* 旋转基点设置为底部居中 */

transform-origin: center bottom;

}

@keyframesrotateCircle {

0%{transform:rotate(0deg); }

100%{transform:rotate(360deg); }

}