纯css3制作简易钟表时钟

使用css3制作简易钟表

效果

html代码

 <div class="clock" ><!-- 指針 --><div class="hour"></div><div class="point"></div><div class="seconds"></div><!-- 黑点 --><div class="center"></div><!-- 大刻度 --><div class="div1"></div><div class="div2"></div><!-- 大刻度遮zao --><div class="p1"></div><!-- 中刻度 --><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div><!-- 小刻度 --><div class="s1"></div><div class="s2"></div><div class="s3"></div><div class="s4"></div><div class="s5"></div><div class="s6"></div><div class="s7"></div><div class="s8"></div><div class="s9"></div><div class="s10"></div><div class="s11"></div><div class="s12"></div><div class="s13"></div><div class="s14"></div><div class="s15"></div><div class="s16"></div><div class="s17"></div><div class="s18"></div><div class="s19"></div><div class="s20"></div><div class="s21"></div><div class="s22"></div><div class="s23"></div><div class="s24"></div><!-- 大遮罩 --><div class="p2"></div></div>

具体的思路就是外边是一个大的圆

.clock {width: 500px;height: 500px;/* border: 8px solid black; */border-radius: 50%;position: relative;left: calc(50% - 250px);z-index: 25;
}

中是一个小的圆点在中心

.center {width: 20px;height: 20px;border-radius: 50%;background-color: gray;position: absolute;left: calc(250px - 10px);top: calc(50% - 10px);z-index: 20;
}

时针分针秒针都是使用细的长方形


.hour {width: 14px;height: 100px;background-color: black;position: absolute;left: calc(250px - 7px);top: calc(50% - 100px);z-index: 19;
}.point {width: 10px;height: 140px;background-color: blue;position: absolute;left: calc(250px - 5px);top: calc(50% - 140px);z-index: 18;
}.seconds {width: 8px;height: 180px;background-color: green;position: absolute;left: calc(250px - 4px);top: calc(50% - 180px);z-index: 17;animation: sec 5s linear 0s;transform-origin: bottom left;
}

大的刻度用两个不同的长方形做成一个十字架的形状


.div1 {width: 8px;height: 500px;background-color: black;position: absolute;left: calc(250px - 4px);z-index: 15;
}.div2 {width: 500px;height: 8px;background-color: black;position: absolute;top: calc(50% - 4px);z-index: 15;
}

用一个小的白圆盖在这个十字架上使用z-index让圆覆盖在十字架上被时针分针秒针盖住


.p1 {width: 430px;height: 430px;background-color: white;border-radius: 50%;position: absolute;left: calc(250px - 215px);top: calc(50% - 215px);z-index: 16;
}

剩下的10个中等刻度宽度比大刻度细一些，使用 transform: rotate();让他倾斜就可以一个格子30度

.div3 {width: 6px;height: 500px;background-color: black;position: absolute;left: calc(250px - 4px);z-index: 15;transform: rotate(30deg);
}.div4 {width: 6px;height: 500px;background-color: black;position: absolute;left: calc(250px - 4px);z-index: 15;transform: rotate(60deg);
}.div5 {width: 6px;height: 500px;background-color: black;position: absolute;left: calc(250px - 4px);z-index: 15;transform: rotate(120deg);
}.div6 {width: 6px;height: 500px;background-color: black;position: absolute;left: calc(250px - 4px);z-index: 15;transform: rotate(150deg);
}

剩下的小刻度方法差不多
举个例子，让他转6度


.s1 {width: 4px;height: 500px;background-color: black;position: absolute;left: calc(250px - 2px);z-index: 12;transform: rotate(6deg);
}

最后使用一个比覆盖十字架的大一些的大圆让他盖住小的柱子
图层让他小于大刻度的图层

注意
1.使用z-index设置图层
中心圆点 > 时针 > 分针 > 秒针 >大刻度遮罩层>12个大的刻度>小刻度的圆>小刻度
2.在定位的时候使用绝对定位top和left时，使用calc()可以让元素到达中心点
比如 calc( 50% - 元素的宽或高 )减号左右一定要用空格分隔

表针转动

让表针转动可以使用

  transform-origin: bottom center;

让旋转中心点到下部的中心点

倒计时五秒

@keyframes sec {0% {transform: rotate(330deg);}20% {transform: rotate(336deg);}40% {transform: rotate(342deg);}60% {transform: rotate(348deg);}80% {transform: rotate(354deg);}100% {transform: rotate(360deg);}
}

获取当前时间要用到js所以只能从固定的点开始计时

纯css3制作简易钟表时钟相关推荐

前端demo——CSS3制作简易时钟
CSS3制作简易时钟创建整个时钟的容器在容器内分别创建时针.分针.秒针考虑:由于旋转时,默认旋转基点在中间,所以把时针.分针.秒针分别放在一个外层容器中,并对它们的外层容器设置动画效果. htm ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
html火影忍者网页设计作品,纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例...
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法.分享给大家供大家参考.具体分析如下: 今天是火影忍者(漫画)宣告完结的日子.看过火影的朋友都知道,写轮眼是什么,这里就不多 ...
纯CSS3制作逼真的iphone 6手机模型
注意这里我只是转载过来的(来自 jQuery之家的分享),然后加以整理.嘻嘻~ 纯CSS3制作逼真的iphone 6手机模型 iphone.html <div class="ipho ...
css3 动画翅膀震动,纯css3制作煽动翅膀的蝴蝶
纯css3制作煽动翅膀的蝴蝶,先看效果怎么样,效果还不错吧上代码: html cssbody{ background: url("./images/bg.jpg&q ...
css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构图标的 ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

纯css3制作简易钟表时钟

使用css3制作简易钟表

表针转动

纯css3制作简易钟表时钟相关推荐

最新文章

热门文章