html添加轮盘,CSS+JS实现一个轮盘时钟

0x00 前言

/* 之前学校计算机社团招新前叫我收集理事们的技术作品来展示，结果只有一位理事交了份作品，我又刚好在网上看到一个安卓的什么“抖X网红时钟动态壁纸”，就试着用CSS和JS整了一个类似的交了上去。所幸最后另一位理事交了第二份作品，用不上我这个

该玩意纯为本菜鸡练习之作，请各路巨佬勿嘲

0x01 HTML搭个框

先大致整几个div，文字之类的一条条写的话比较繁琐，故用JS生成：

Title

0x02 样式整上

设置一下背景字体什么的：body {

background: #000;

color: #00ffff;

text-shadow: rgba(0, 255, 255, 50) 0 0 1em;

font-size: 32px;

}

给父div整个绝对定位：.father {

position: absolute;

}

因为显示秒的轮的旋转基点(圆心)设置在x轴的-1024px，所以旋转半径为1024px，把轮盘右移1024px，以便让定位锚点从右边第一行字的左上角移到圆心，设置每60秒旋转一周：#wheelOfSeconds {

left: 1024px; /*右移*/

position: absolute;

display: inline;

transform-origin: -1024px; /*设置圆心*/

animation: rotate 60s infinite linear; /*应用后面设置的旋转关键帧rotate*/

}

显示分钟的轮的旋转半径为768px，把轮盘左移1024px，每3600秒旋转一周：#wheelOfMinutes {

left: 768px; /*右移*/

position: absolute;

display: inline;

transform-origin: -768px; /*设置圆心*/

animation: rotate 3600s infinite linear; /*旋转*/

}

显示小时的轮的旋转半径为512px，每24小时旋转一周：#wheelOfHours {

left: 512px; /*右移*/

position: absolute;

display: inline;

transform-origin: -512px; /*设置圆心*/

animation: rotate 86400s infinite linear; /*旋转*/

}

设置轮盘中间的时间和日期样式：#time {

font-size: 128px;

position: relative;