<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.face{
width: 500px;
height: 500px;
border: 20px solid blue;
border-radius: 50%;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.hourNum{
display: inline-block;
width: 40px;
height: 40px;
font-size: 40px;
font-weight: bold;
}
.point{
width: 500px;
height: 10px;
/*background-color: black;*/
position: absolute;
top: 245px;
float: left;
margin: 0 0;
}
.point span{
margin: -18px 10px;
}
.point span:nth-child(1){
float: left;
}
.point span:nth-child(2){
float: right;
}
.point:nth-child(1){
transform: rotate(-90deg);
}
.point:nth-child(1) span{
transform: rotate(90deg);
}
.point:nth-child(2){
transform: rotate(-60deg);
}
.point:nth-child(2) span{
transform: rotate(60deg);
}
.point:nth-child(3){
transform: rotate(-30deg);
}
.point:nth-child(3) span{
transform: rotate(30deg);
}
.point:nth-child(5){
transform: rotate(30deg);
}
.point:nth-child(5) span{
transform: rotate(-30deg);
}
.point:nth-child(6){
transform: rotate(60deg);
}
.point:nth-child(6) span{
transform: rotate(-60deg);
}
.hPoint{
width: 200px;
height: 30px;
/*background-color: red;*/
position: absolute;
top: 235px;
left: 150px;
}
.hHalf{
width: 100px;
height: 30px;
background-color: red;
float: right;
}
.mPoint{
width: 300px;
height: 20px;
/*background-color: yellow;*/
position: absolute;
top: 240px;
left: 100px;
}
.mHalf{
width: 150px;
height: 20px;
background-color: yellow;
float: right;
}
.sPoint{
width: 400px;
height: 10px;
/*background-color: green;*/
position: absolute;
top: 245px;
left: 50px;
}
.sHalf{
width: 200px;
height: 10px;
background-color: green;
float: right;
}
.center{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
top: 225px;
left: 225px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="face">
<div class="point">
<span class="hourNum">6</span>
<span class="hourNum">12</span>
</div>
<div class="point">
<span class="hourNum">7</span>
<span class="hourNum">1</span>
</div>
<div class="point">
<span class="hourNum">8</span>
<span class="hourNum">2</span>
</div>
<div class="point">
<span class="hourNum">9</span>
<span class="hourNum">3</span>
</div>
<div class="point">
<span class="hourNum">10</span>
<span class="hourNum">4</span>
</div>
<div class="point">
<span class="hourNum">11</span>
<span class="hourNum">5</span>
</div>
<div class="hPoint"><div class="hHalf"></div></div>
<div class="mPoint"><div class="mHalf"></div></div>
<div class="sPoint"><div class="sHalf"></div></div>
<div class="center"></div>
</div>
<script type="text/javascript">
var h = document.querySelector(".hPoint");
var m = document.querySelector(".mPoint");
var s = document.querySelector(".sPoint");
var timer = setInterval(timeRun,50);
function timeRun(){
var date = new Date();
var seconds = date.getSeconds();
var hours = date.getHours();
var minutes = date.getMinutes();
var angle1 = seconds*6-90;
var angle2 = (minutes+seconds/60)*6-90;
var angle3 = (hours+minutes/60)*30-90;
s.style.transform = "rotate(" + angle1 + "deg)";
m.style.transform = "rotate(" + angle2 + "deg)";
h.style.transform = "rotate(" + angle3 + "deg)";
}
</script>
</body>
</html>
动画时钟
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 点赞的粒子动画 计数器动画 牛顿摆 十种语言讲俺爱你和录音播放暂无截图。 网格动画![网格动画].gif](htt...
- 显示当前时间的时钟 为游戏对象创建层级关系 编写脚本并与对象关联 使用命名空间 使用方法更新游戏物体 按时间进行旋...
- 经过几次实验,发现如果分享的文章能构成系列,效果会非常好。同时自己也能收获很大,能够整块整块的复习,也能够帮助自己...