【CSS特效】108个小时钟组成大数字时钟

今天看到一篇 CSS动画篇之炫酷时钟之时钟墙，是由108个小的时钟，画出大的时钟，本来是一分钟旋转一次，现在改成每秒旋转一次。上效果图：

这个效果图共有 6行 18列，每一个格子都是由两个指针组成的小时钟。

实现思路：

时钟默认状态是这种情况

所以用不到的格子，显示的就是这种状态。分和秒之间的“冒号”上下方就是这种。

组成数字所需要的基本元素：

只要控制好每个小时钟，按照一定的规律旋转即可。

代码实现：

HTML代码

<div class="display"><div class="digit"><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div></div><div class="digit"><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div></div><div class="digit separator"><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div></div><div class="digit"><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div></div><div class="digit"><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div><div class="clock"></div></div>
</div>

CSS代码

html, body {height: 100%;
}body {padding: 0;margin: 0;background-color: #333;background: radial-gradient(#fff, #eee);display: flex;
}.display {flex: 1;display: grid;grid-gap: 8px;max-width: 85em;grid-template-columns: 1fr;padding: 2rem;box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.1);margin: auto;background-color: #f7f7f7;background: linear-gradient(to bottom, #fff, #f5f5f5);
}
@media (min-width: 20em) {.display {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 40em) {.display {grid-template-columns: repeat(2, 2fr) 1fr repeat(2, 2fr);}
}.digit {display: grid;grid-template-columns: repeat(4, 1fr);grid-column-gap: 8px;grid-row-gap: 4px;
}.digit.separator {display: none;
}
@media (min-width: 40em) {.digit.separator {display: grid;grid-template-columns: repeat(2, 1fr);}
}.clock {border-radius: 50%;padding-top: 100%;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);position: relative;background-color: #fff;
}
.clock:nth-child(2n+1) {transition-delay: 0.1s;
}
.clock:before, .clock:after {content: "";display: inline-block;height: 45%;width: 4px;background-color: #444;position: absolute;left: 50%;top: 8%;margin-left: -2px;transform-origin: 2px 100%;transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1);
}
.clock.pos1:before {transform: rotate(90deg);
}
.clock.pos2:before {transform: rotate(180deg);
}
.clock.pos2:after {transform: rotate(90deg);
}
.clock.pos3:before {transform: rotate(180deg);
}
.clock.pos3:after {transform: rotate(270deg);
}
.clock.pos4:before {transform: rotate(270deg);
}
.clock.pos4:after {transform: rotate(360deg);
}
.clock.pos5:before {transform: rotate(360deg);
}
.clock.pos5:after {transform: rotate(540deg);
}
.clock.pos6:before {transform: rotate(450deg);
}
.clock.pos6:after {transform: rotate(630deg);
}

JS代码

var groups = document.querySelectorAll('.digit')function setNumber(group, number) {var clocks = group.children;var numbers = ['266352355555555551451664','263013500550055024131664','266316352645526451631664','266316352645163526451664','232355555145163500550014','266352645163163526451664','266352645163523551451664','266316350055005500550014','266352355145523551451664','266352355145163500550014']for(var i = 0; i < 24; i++) {clocks[i].classList.value = 'clock pos' + numbers[number][i]}
}function setSeparator(group) {var pos = '002314231400';for(var i = 0; i<12; i++) {group.children[i].classList.value = 'clock pos' + pos[i];}
}function pad(number, digits) {number = parseInt(number, 10)  return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}function writeTime() {var now = new Date();var hour = now.getHours().toString();var minute = now.getMinutes().toString();var second = now.getSeconds().toString();
//   var number = pad(hour,2) + pad(minute, 2);var number = pad(minute,2) + pad(second, 2);setNumber(groups[0], number[0]);setNumber(groups[1], number[1]);setNumber(groups[3], number[2]);setNumber(groups[4], number[3]);
}function runEveryMinute(f) {var now = new Date();setTimeout(function(){f();setInterval(f, 1000);}, 1000);
}setTimeout(function() {setSeparator(groups[2]);runEveryMinute(writeTime);writeTime();
}, 200);

拆解：

numbers数组放置了0-9这10个数字，怎么组成的。

比如数字 0的效果图如下：

对比这个图

就会得出：

所以numbers数组中0的编码就是：

'266352355555555551451664'

其他的数字同理。

方法 runEveryMinute() 是控制每秒还是每分钟去执行。

方法 writeTime() 是获取显示的时分秒，就是获取到底要显示的数字。

源代码是每分钟执行一次，各个小时钟旋转的都很慢，所以还修改了CSS的代码：

/**修改前**/
transition: all 10s cubic-bezier(0.5, 0, 0.5, 1);/**修改后**/
transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1);

想要每分钟动画的源代码，请留言。也可以自行动手修改。

【CSS特效】108个小时钟组成大数字时钟相关推荐

经典面试题：CSS定位知识及小盒子套大盒子的方法
一.页面布局 1.1页面布局分类 css网页布局的本质:就是在网页中排列盒子(标签) css网页布局分为3种机制:普通流.浮动.定位普通流:就是从上到下,从左到右的排布浮动:本质是让块元素横向排列 ...
圆形数字时钟同时显示数字时钟、日期和星期特效
前几天看到动画效果,于是今天想写个时钟效果分享. <!DOCTYPE html> <html lang="en"><head><meta ...
时钟程序设计java_Java数字时钟实现代码详解
这是一个数字钟表程序,主要功能是从系统中获取当前的系统时间然后再将其显示在数字时钟上,由于整个的数字时钟都是用函数构成的,所以它可以实现一般的数字时钟所不具有的功能,比如说它可以被鼠标指针拖动到窗口 ...
基于AT89S52芯片+LCD1602液晶显示+DS12C887时钟模块的数字时钟
文章目录 1. 前提 2. 目标 3. 代码 1. 前提 51单片机,通过实验箱实现实时数字时钟,这里选用DS12C887时钟模块进行实验内容. 2. 目标使用更为精准的DS12C887时钟模块进行 ...
51单片机驱动ds12887c语言,51单片机+DS12887+12864大数字时钟程序+电路
/*--------------------------------------------------------------------------- 电子智能时钟程序单片机:STC89C5 ...
c语言程序数字时钟的设计,数字时钟C语言设计
#include #include unsigned char data dis_digit; unsigned char key_s, key_v; unsigned char code dis_c ...
html显示时钟翻页 js,js css3翻页数字时钟代码
特效描述:js css3翻页数字时钟.js获取本地时间数字时钟翻页动画代码. 代码结构 1. 引入JS 2. HTML代码 'use strict'; function _classCallCheck ...
vue2中实现滚动数字时钟效果
前言: 分享一个好玩的小组件,滚动数字时钟效果. 实现效果: 实现源码:新建一个vue文件,把下面内容都放进去,运行就好了 <template><div class="wr ...
FPGA之VGA/LCD数字时钟显示
文章目录前言一.LCD显示控制 1.LCD显示一个字符 2.LCD显示多个字符二.数字时钟输出 1.数字时钟 2.十进制数据拆分BCD码三.按键检测及LCD驱动 1.按键检测 2.LCD驱动 ...

【CSS特效】108个小时钟组成大数字时钟

实现思路：

代码实现：

【CSS特效】108个小时钟组成大数字时钟相关推荐

最新文章

热门文章