【译】9个免费开源的使用CSS和JavaScript实现的翻转时钟特效

经典的翻盖式时钟是多年来的主打产品,它只是数字时代过时的又一件事——尽管还没有完全被遗忘。

我们可以在PSD格式中找到一组很酷的时钟设计,但在代码中更难找到工作的翻转式时钟。所以我开始在网上寻找一些很棒的例子。

这个画廊有9个完全免费的翻转时钟设计与各种风格和编码技术。

无论您是想为实践构建这样的代码,还是在页面上添加一个工作时钟,这些代码片段都会有所帮助。

Flip Clock & Countdown

所以这里有一个非常有趣的项目,它的特点是在纯JS中运行翻转倒计时。

有一些CSS样式,但整个动画设置和结构都运行在javascript上。甚至HTML也可以通过JavaScript嵌入。

但是如果你仔细研究代码的话,从这个例子中还可以学到很多东西。你会发现一些很好的代码片段可以重用,这为测试JavaScript打下了很好的基础。

React Flip Clock

前端开发人员喜欢反应的力量和庞大的社区。

有了它,你就可以构建轻量的网络应用程序,而这个时钟设计只是一个例子。

开发人员LiborGabrhel创建了一个用于测试React的小项目。工作如此顺利,设计精美。

请注意,虽然JS有点复杂,但我也认为对于刚开始学习React的人来说,这将是一个很好的学习项目。

FlipDown.js Example

开发人员Peter Butcher使用一个名为Flipdown.js的简单自定义插件创建了这个整洁的实验

这在普通的javascript上运行——所以它没有依赖性。这也是一个非常容易编辑,修改和扩展自己的功能插件。

我不能说这个翻转动画是完美的,因为我发现了一些滞后跳跃。

但对于一个非常简单的插件,我绝对印象深刻。

Pomodoro Timer

世界上没有足够的形容词来形容这个计时器应用程序的惊人之处。

它是建立在pomodoro技术的基础上的,它在您的Web浏览器中运行正常。你基本上设置了计时器,然后点击“开始”。从那里开始,一个倒转的时钟动画倒计时到你的第一次休息。

您甚至可以更改总休息时间和总工作会话时间。

另外,用户界面的设计非常出色,而且它的设计也非常巧妙。

Countdown Clock

所以也许你不喜欢你的项目使用基本的javascript。也许你更喜欢使用插件的jquery。没问题。

看看这个jquery脚本,它有一个非常基本的倒计时时钟。无论网页浏览器如何,我都注意到动画风格非常流畅,容易上手。

每一个翻转效果看起来都像一个本地的3D转换,因为翻转的项目感觉就像是在移动。要想做到这一点需要一些努力。

如果你想让你的主页或登陆页面有一个干净、流畅的时钟效果,那么一定要记住这一点。

Flipping Clock

好吧,所以这个例子不完全符合“翻转”时钟的模型。

但我确实认为这个例子看起来很棒它继承了翻转时钟动画的精神。

开发人员harsha bhat使用haml、sass和一些干净的普通javascript创建了这个效果。

有趣的是,世界上所有的免费网络框架仍然无法触及普通的javascript。

我把这种效果比作一种极简设计技术,它可以与干净、简单的网站协同工作。如果你正在做一个能很好地适应这种风格的项目,试试看。

Pure CSS

离开了JavaScript,您可能正在寻找一个纯粹的CSS3替代方案。在这种情况下,一定要保存这个例子,因为它是我能找到的最好的一个。

CSS3在动画方面还有很长的路要走,我认为它永远也赶不上Javascript。

但是如果你知道自己在做什么,你可以用纯CSS代码做出一些非常好的效果。

我真的很喜欢把这个片段作为一个倒挂时钟的起点。动画并不像你想象的那样3D,但它确实给人一种自然运动的错觉——这对这种功能至关重要。

Lighter Design

大多数翻页时钟设计,你会发现在线功能的黑色方块与较轻的文字。但是这个设计是不同的。

开发人员EdHicks创建了这个轻量级的翻转时钟作为运行在CSS和JS代码上的备用设计。它实际上是一个相当复杂的项目,但是JS是简化的,因为它运行在jQuery之上。

任何想在他们的网站上增加一个更轻样式的时钟的人都会喜欢在这个代码片段中挖掘。

Clock in Vue.js

有一件事我喜欢这个Vue支持的时钟是所有的数字组合成一个正方形。

在大多数时钟上,你会发现每一个数字的秒和分钟都有自己的块。

在我看来,这只钟看起来更平稳了。更不用说,如果你刚开始学习Vue.js,这是一个很好的练习。

您会注意到,这个列表在编码样式上有很多种多样性,许多甚至不使用框架。如果你想看更多的东西,你可以找到许多其他的例子,如果你花一些时间在CodePen上挖掘。

原文地址:https://1stwebdesigner.com/9-free-open-source-flipping-clocks-using-css-javascript/