来模仿一个ISO上的时钟:ISO时钟
实现效果:
ISO时钟
项目分析
1,首先时钟嘛,肯定要获取本地客户端的时间,
2时钟有三个指针,我们可以通过添加动画的方式让它们围绕中心点转动;
3,通过获取到的小时,分钟和秒值分别计算时针,分针和秒针的角度值;
CSS
HTML&
布局
& lt; div类="盒子"比;
& lt;文章类=笆敝印北?
& lt; div类=癶ours-container”比;
& lt; div类="小时"祝辞& lt;/div>
& lt;/div>
& lt; div类=癿inutes-container”比;
& lt; div类="分钟"祝辞& lt;/div>
& lt;/div>
& lt; div类=皊econds-container”比;
& lt; div类="秒"祝辞& lt;/div>
& lt;/div>
& lt;/article>
& lt;/div>
1,。盒子是为了布局的方便;
2,然后每个指针都需要一个*集装箱容器。
添加CSS样式
把背景加载进来,然后放在页面中合适的位置上。
html{,字体大小:10 px;
}html,身体{,保证金:0;,填充:0;
}。盒子{宽度:35眼动;高度:38眼动;,,,背景:rgb (205205205);border - radius: 1快速眼动;利润率:5%的汽车;显示:flex;justify-content:中心;对齐项目:中心;
}。时钟{,宽度:30眼动;,高度:30眼动;,背景:# fff url (ios_clock.svg)没有重演中心;,background-size: 88%;,这个特性:50%;,位置:相对;
}
之前
1,宽度:35眼动;高度:38眼动;这个比例比较顺眼吧,
2, .box使用Flex布局方式,并且使其中的.clock水中,垂直方向都居中。看过第一天教程应该都明白Flex布局的。
3,时钟的背景使用一张图片。获取地址
添加中心轴
使用CSS3中的伪元素为时钟添加实心小圆点,指针都围着这个点转。
.clock:{后,内容:”;,宽度:1.5快速眼动;,高度:1.5快速眼动;,背景:# 000;,这个特性:50%;,位置:绝对;,上图:50%;,左:50%;,变换:翻译(-50%,-50%);,/*向左上移动自身的50% */,z - index: 10;
}
之前
1,这句内容:”;是必须的,不然这个伪元素不会显示,即使指定了宽度和高度。
2,由于相对定位是从元素的左上角开始计算的,所以:50%;左:50%;不能使这个小圆点在时钟的中心,使用变换:翻译(-50%,-50%);向左上方移动自身宽度或高度的50%
3, z - index: 10;是为了使这个小圆点在视图的最上层,遮挡住指针交叉的地方
指针容器
.hours-container .minutes-container,。seconds-container{,位置:绝对;,上图:0;,右:0;,底部:0;,左:0;
}
之前
1,容器被放置在时钟的上方,但是并没有样式,接下来就可以创建指针了!
添加指针
.hours{,宽度:3%;,高度:20%;,背景:# 000;,transform-origin: 50% - 100%;,位置:绝对;,上图:30%;,左:48.5%;
}。分钟{,宽度:2%;,高度:37%;,背景:# 000;,transform-origin: 50% - 100%;,位置:绝对;,上图:13%;,左:49%;
}。秒{,宽度:1%;,高度:40%;,背景:# f00;,transform-origin: 50% - 90%;,位置:绝对;,上图:20%;,左:49.5%;,z - index: 8;
}
之前
1,分别添加时针,分针和秒针。
2,使用%这种单位可以更好地适应不同的屏幕。
3, transform-origin: 50% - 90%;规定指针旋转的位置为:X方向的中心线和Y方向的90%处这条线的交叉点。(具体看图吧)
4,这里在定位的时候把自身的宽度计算在内了,所以就不必在往左上角移动了。
动画
目前为止,这个时钟还是没有功能的,我们来让它动起来。
定义动画规则
@keyframes旋转{
100%{大敌;,变换:rotateZ(360度);
,}
}
