无意中看到了一款锁屏效果–world clock,感觉有点意思,就想着用前端来实现他。

实现这个效果主要需要实现两个部分

  • 时间元素旋转显示
  • 时间自动旋转

实现元素旋转显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// li 通用样式
li {
color: #777;
list-style: none;
width: 150px;
text-transform: lowercase;
transform-origin: 0 center;
position: absolute;
left: 0;
top: 0;
}
// li 行内样式
li:nth-child(1){ transform: rotate(0deg); }
``````
### 每个li根据实际位置,旋转度数不同,总的加起来360度就可以了
> 时间初始化与自动旋转

* 每一个li去做循环,等于当前日期值的li旋转度数为0,小于的当前日期值为负,大于为正。
  • 一月
  • 二月
  • 三月
  • 四月
  • 五月
  • 六月
  • 七月
  • 八月
  • 九月
  • 十月
  • 十一月
  • 十二月
1
2
### 源码如下

Word Clock

  • 一月
  • 二月
  • 三月
  • 四月
  • 五月
  • 六月
  • 七月
  • 八月
  • 九月
  • 十月
  • 十一月
  • 十二月

``` ### 最后的效果 ![image.png](https://cdn.jsdelivr.net/gh/inkdp/CDN@main/img/image-7492af1c.png)

写在最后,时间直接使用jq更改很僵硬,可以通过CSS动画实现。