实现一个秒针效果
2020-07-12 本文已影响0人
Time_Notes
分别设置动画名称、动画持续时间、动画播放函数、动画循环、旋转基准点
.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); }
}
