基于基于HTML5+CSS3实现简单的时钟效果实现简单的时钟效果
目的：目的：
利用html5，css实现钟摆效果
知识点：知识点：
1） 利用position/left/top和calc()实现元素的水平和垂直居中；
2） 利用CSS3的animation/transform/transform-origin属性定义动画；
3） 利用transform-origin实现旋转原点的圆心调整
废话不多说了，直接看代码吧，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
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);
weixin_38681646
- 粉丝: 6
- 资源: 882
最新资源
- ACR122u写卡软件
- 【java毕业设计】职称评审管理系统源码（springboot+vue+mysql+说明文档+LW）.zip
- 【java毕业设计】springboot校园志愿者服务管理系统(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】springboot毕业生追踪系统(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】招生管理系统源码（springboot+vue+mysql+说明文档+LW）.zip
- springboot中华传统服饰文化传播系统61792（数据库+源码）
- 【java毕业设计】招聘信息管理系统源码（springboot+vue+mysql+说明文档+LW）.zip
- genad-horizon-gridsample.zip
- vscode-pylance-2023.5.21-vsixhub.com.vsix
- 计算机网络课程实验报告-3.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0