微客导航 » 文章资讯 » js实现特别简单的钟表效果

js实现特别简单的钟表效果

2023-07-16 17:30:03 290

本文实例为大家分享了js实现钟表效果的具体代码，供大家参考，具体内容如下

*{
margin:0;
padding:0;
}

.clock{
position:relative;
width:200px;
height:200px;
border:solid14pxrgb(247,129,149);
border-radius:50%;
margin:100pxauto;
background:linear-gradient(rgb(190,155,223),pink);

}
.circle{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:12px;
height:12px;
background-color:black;
border-radius:50%;

/*优先显示它*/
z-index:5;
}
.hour{
position:absolute;
left:49.5%;
top:48px;
width:4px;
height:50px;
background-color:blue;

/*steps(60)--分60步走*/
animation:run21600ssteps(60)infinite;

/*绕着底部旋转*/
transform-origin:bottom;

z-index:3;

}
.minutes{
position:absolute;
left:49.5%;
top:28px;
width:3px;
height:70px;
background-color:rgb(240,83,83);

animation:run3600ssteps(60)infinite;

transform-origin:bottom;
z-index:2;

}
.seconds{
position:absolute;
left:50%;
top:2px;
width:2px;
height:96px;
background-color:pink;
animation:run60ssteps(60)infinite;
transform-origin:bottom;
}

.ps{
width:100%;
height:100%;
}
.number{
position:absolute;
left:50%;
width:10px;
height:98px;
transform-origin:bottom;
color:rgb(230,53,156);
font-weight:bold;
font-size:20px;
}
.number:last-child{
left:47%;
}
@keyframesrun{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg)
}
}

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现特别简单的钟表效果

热门推荐

随机推荐