利用html5，css实现钟摆效果 ，在项目中经常会遇到，今天把基于html5+css3实现简单的时钟效果的实现代码分享到本站平台，需要的朋友参考下吧
目的：
利用html5，css实现钟摆效果
知识点：
1） 利用position/left/top和calc()实现元素的水平和垂直居中；
立即学习“前端免费学习笔记（深入）”；
2） 利用CSS3的animation/transform/transform-origin属性定义动画；
3） 利用transform-origin实现旋转原点的圆心调整
废话不多说了，直接看代码吧，具体代码如下所示：
li{ list-style:none; } #box{ width: 400px; height: 400px; position: absolute; top:calc(50% - 200px); left:calc(50% - 200px); border: 2px solid palegoldenrod; } #dial{ width: 200px; height: 200px; position: absolute; top:calc(50% - 100px); left:calc(50% - 100px); border: 2px solid cyan; border-radius: 50%; } .scaleIndex{ width: 4px; height: 12px; position: absolute; top: 0; left: calc(50% - 2px); background-color: gray; transform-origin: 2px 100px; } .angle30{transform : rotate(30deg);} .angle60{transform : rotate(60deg);} .angle90{transform : rotate(90deg);} .angle120{transform : rotate(120deg);} .angle150{transform : rotate(150deg);} .angle180{transform : rotate(180deg);} .angle210{transform : rotate(210deg);} .angle240{transform : rotate(240deg);} .angle270{transform : rotate(270deg);} .angle300{transform : rotate(300deg);} .angle330{transform : rotate(330deg);} #fixPoint{ width: 10px; height: 10px; position: absolute; top:calc(50% - 5px); left:calc(50% - 5px); background-color: cadetblue; border-radius: 50%; } #hourHand{ width: 6px; height: 70px; position:absolute; top: 40px; left: calc(50% - 3px); background-color: darkblue; transform-origin: 50% 60px; } #minuteHand{ width: 4px; height: 75px; position:absolute; top: 35px; left: calc(50% - 2px); background-color: yellow; transform-origin: 50% 65px; } #secondHand{ width: 2px; height: 90px; position:absolute; top: 20px; left: calc(50% - 1px); background-color: red; transform-origin: 50% 80px; }
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
html5和css3以及jquery实现音乐播放器
使用JavaScript和canvas实现图片的裁剪
以上就是关于HTML5和CSS3实现时钟的效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610587.html
微信扫一扫 
支付宝扫一扫 
