js实现特别简单的钟表效果
本文实例为大家分享了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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。