这是一个使用CSS动画制作的炫酷时钟墙效果。整个时钟由许多小的时钟组成，通过CSS动画每秒切换时间，展现出动态变化的视觉效果。每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。
使用方式
复制源代码到空白的html格式文件，在浏览中打开运行即可。
源代码
可上下滑动查看完整源代码：
<style>
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.4s;
}
.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 10s 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);
}
</style>
<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>
<script>
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 number = pad(hour,2) + pad(minute, 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();
var timeUntilNextMinute = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds());
setTimeout(function(){
f();
setInterval(f, 60000);
}, timeUntilNextMinute);
}
setTimeout(function() {
setSeparator(groups[2]);
runEveryMinute(writeTime);
writeTime();
}, 200);
<script>
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
