CSS实现放在桌面上的极简风格黑白主题模拟电子闹钟

极简钟表

CSS实现放在桌面上的极简风格黑白主题模拟电子闹钟

​一款通过CSS实现的白色极简风格主题模拟时钟,为了出色地体现极简模式,整个模拟时钟只使用了白色与黑色的主色调,其中表盘是白色的,而时针与分针是黑色的,仅有的两种颜色形成了鲜明的对比,将极简模...

CSS实现以3D分层的方式展示钟表等物件的内部结构

层次钟表

CSS实现以3D分层的方式展示钟表等物件的内部结构

基于CSS的transform等关键属性实现的层次感十足的倾斜悬浮3D模拟时钟,可以通过3D分层的效果展示钟表等物体的内部层次结构,时钟整体划分为四层结构,最上层是个人头像,第二次是模拟表盘,第...

CSS数字被弹出3D立体效果模拟时钟

3D时钟

CSS数字被弹出3D立体效果模拟时钟

CSS实现的表盘时刻数字为3D突出显示样式的模拟时钟,表盘的底座是白色的,时分指针以及时刻数字都是黑色的,12时刻数字基于CSS实现了3D挤出效果,有种立体的视觉感。是一款非常时尚的模拟时钟!

CSS实现挂在砖墙上的绚丽霓虹灯效果模拟时钟

霓虹灯时钟

CSS实现挂在砖墙上的绚丽霓虹灯效果模拟时钟

通过CSS实现的一款超绚丽的霓虹灯表盘效果模拟时钟,夜光暮色中一盏发着绚丽灯光的霓虹灯时钟挂在砖墙之上,蹦迪气氛已到位,还不起来嗨?

CSS实现拥有金属质感表盘的模拟时钟

金属钟表

CSS实现拥有金属质感表盘的模拟时钟

一款通过CSS实现的银灰色质地金属表盘模拟时钟,金属质感特别的强烈,表盘呈现三层阶梯式嵌套结构,从里到外依次变高,有种3D立体的感觉。表盘外层的12个刻度清晰可见对应12个小时,而且仔细观察表盘...

CSS傅科摆实验模拟时钟

傅科摆锤

CSS傅科摆实验模拟时钟

傅科摆(Foucault's Pendulum)是一个经典的物理实验,用于证明地球的自转。傅科摆的基本原理是利用一个自由悬挂的重物(摆锤)在无外力干扰的情况下,其摆动平面不会改变,而地球的自转会...

CSS超级玛丽游戏火轮机关效果模拟时钟

火轮时钟

CSS超级玛丽游戏火轮机关效果模拟时钟

​受超级马里奥游戏的启发,开发了一款通过CSS实现的火轮机关模拟时钟,钟表的指针是一根被多团火包围的火棍,一共有三根这样的火棍分别代表时分秒的指针,钟表的外围是多功能玛丽游戏里的砖墙效果,三根...

CSS空间感极强的3D悬浮箱子错觉(Illusion)效果模拟时钟

悬浮时钟

CSS空间感极强的3D悬浮箱子错觉(Illusion)效果模拟时钟

通过CSS实现的一款容易让人产生错觉的模拟时钟,这款时钟拥有黑色的表针,表盘是一个仿佛悬空的3D立体盒子,底部还带有模糊的影子效果,当鼠标悬浮于表盘之上会以数字的形式提示当前时间。给人一种神秘、...

CSS实现具有透视效果表盘的模拟时钟

透视钟表

CSS实现具有透视效果表盘的模拟时钟

​通过CSS结合JS实现的一款具有透视数字表盘效果的模拟时钟,使用了CSS的perspective关键属性实现的透视效果,JS控制时分秒指针移动。这种效果仿佛你正通过一根管子观察它们,这种设计可...

CSS+JS实现拥有罗马数字金属骨架外观的罗马模拟时钟

罗马时钟

CSS+JS实现拥有罗马数字金属骨架外观的罗马模拟时钟

​通过CSS结合JavaScript实现的罗马模拟时钟,时钟的表盘是通过罗马数字符号的金属架构组成的,相当有金属质感和古老风格的一款时钟效果。并且支持鼠标悬浮显示阿拉布数字的时间提示。实现这一款...

SVG+CSS饼图主题模拟时钟,指针扫过的区域是一个饼图!

饼图钟表

SVG+CSS饼图主题模拟时钟,指针扫过的区域是一个饼图!

基于CSS+JS+SVG实现的一款创意模拟时钟,钟表指针扫过的区域阴影部分是一个饼图效果,而整个钟表的表面被划分为了三个不同颜色的区域,其中钟表素材是由svg实现的,饼图时钟整体效果是由CSS实...

CSS+JS实现通过当前时间的时分秒数字串起来的指针组成的创意模拟时钟!

数字串钟表

CSS+JS实现通过当前时间的时分秒数字串起来的指针组成的创意模拟时钟!

一款特别有创意的模拟时钟效果,钟表的时分秒常见指针都是通过当前时间所对应的数字串联到一起的,随着时间规则的走动。这款有趣的钟表效果实现起来也很简单,通过CSS绘制表盘以及指针行走动画,JavaS...