注册
web

前端这样的时钟代码,简直就是炫技!

在网上收了一番,找到一个专门收集时钟代码的网站!
b5c19f3a39554576898328235b0cc012~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

这里和大家分享一下!几十款各种各样好玩又酷炫的时钟代码!值得收藏!

概要

网站上的所有代码都来自 codepen 站点。作者把它们收集起来,统一呈现给大家。

作者把它们分为了三大类:BEAUTIFUL STYLE,CREATIVE DESIGN, ELECTRONIC CLOCK.
大师兄看了半天,觉得这分类带有强烈的个人偏好!毕竟大师兄觉得在BEAUTIFUL STYLE下的很多例子都很具有CREATIVE范儿!一起来看下吧!

BEAUTIFUL STYLE CLOCK

这个分类下的时钟,表现形式比较简朴,但不妨碍它的美感!

64a0b53e11394a6a920241872637475a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

这个时钟的呈现方式其实也满富有创造力的

31af0c959d6549098f692598265e1754~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

这个就像家里的挂钟一样

CREATIVE DESIGN

凡是归纳到这个分类下的设计,都是很具有创作力的!

53084e9980a04fe5811c6fa538a1ae18~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

米老鼠的手臂指着时针、分针,脚和尾巴有规律的动着

d5054e12865c4f238c4c150eeb2621e5~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

通过肢体的动作来表示时间,真是别具一格

ELECTRONIC CLOCK

这个分类就是电子时钟类别了!

f96b1d82015b4fd8ae203ea5d1fd4374~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

如果你的页面需要电子时钟,直接来这个类别找吧!

b8824f6fba5c4d3dae640dd9bcd6eb4f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

重点说明

上面只是在每个类别中选了两个给大家展示。官网上还有其他几十种样式供大家学习!

官网地址
drawcall.github.io/clock-shop/

另外,每个例子都有可参考的代码!

7219409034a74888828cdfa0adef52bd~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp

(伸手党们的福利!) 如果你现在的项目用不上!那赶紧找一款好看的时钟挂到你的博客主页上, 瞬间会让它变得高大上的。

作者:程序员老鱼
来源:juejin.cn/post/7202619396991352893

0 个评论

要回复文章请先登录注册