• 15个超强悍的CSS3圆盘时钟动画赏析


    在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间。今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有一部分利用jQuery和SVG,让我们一起来看看吧。

    1、纯CSS3/SVG实现的带秒针表盘圆盘复古时钟

    现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟,基于纯CSS3,盘面是SVG绘制而成,并没有使用任何图片。时钟整体外观比较怀旧,给人不一样的视觉感受。

    css3-svg-longcase-clock

    在线演示    源码下载

    2、HTML5 Canvas 3种不同风格的圆盘时钟

    这次我们要继续为大家分享一款基于HTML5 Canvas的圆盘时钟动画,和之前分享的这款HTML5 Canvas 圆形时钟动画类似,它也是基于HTML5的,但是这款时钟提供了3种不同的样式风格,而且时钟的大小可以自己控制。

    html5-canvas-3-style-clock

    在线演示    源码下载

    3、迷你可爱的jQuery/CSS3圆盘时钟

    记得以前跟大家分享过好几款基于jQuery或者HTML5/CSS3的圆盘时钟动画插件,今天要介绍的也是一款基于jQuery和CSS3的简易圆盘时钟,它的特点是圆盘中央会有一个很大的数字,表示当前是几点。

    jquery-css3-circle-clock

    在线演示    源码下载

    4、CSS3带数字时钟的创意圆盘时钟动画

    前几天我们刚刚为大家分享过一款基于SVG和CSS3的复古圆盘时钟,大家可以在这里查看演示和这里下载源码。今天又要给大家带来另外一款CSS3圆盘时钟,它的特点是圆盘对半分,一半显示数字时钟信息,另一半是半个圆盘时钟,样式设计上非常富有创意。

    css3-circle-pretty-clock

    在线演示    源码下载

    5、HTML5 SVG圆盘时钟动画 5种时钟样式

    今天我们要来分享一款基于HTML5和SVG的圆盘时钟动画,首先,圆盘时钟的时间是和你的本地时间同步的,因此,你完全可以用它来看上网时间。另外,这款HTML5圆盘时钟提供了5中不同的盘面样式,有带刻度的和不带刻度的,还挺实用的。

    html5-svg-clock

    在线演示    源码下载

    6、CSS3手表倒计时动画 可自定义主题皮肤

    早段时间,我们为大家分享过一些比较炫酷和实用的时钟手表插件,比如这款纯CSS3 3D立体圆盘时钟动画HTML5仿Apple Watch时钟动画,效果都非常不错。今天我们要利用CSS3来实现一个手表样式的倒计时动画,功能相对比较简单,最大的特点在于可以切换4种不同的主题皮肤。

    css3-watch-timer

    在线演示    源码下载

    7、HTML5 Canvas环形数字时钟 精确到毫秒

    之前我们分享过很多非常富有创意的jQuery时钟和HTML5时钟,这次我们要分享的也是一款基于HTML5 Canvas的环形数字时钟,它的另外一个特点是可以精确到毫秒,环形指针也有发光的视觉效果。

    html5-canvas-circle-digit-clock

    在线演示    源码下载

    8、jQuery实现一个挂在墙上的圆盘时钟动画

    今天我们要给大家介绍一款基于jQuery的圆盘时钟动画,首先时钟是可以正确显示当前本地时间的,而且也可以随着本地时间实时更新。其次这款时钟与前面分享的HTML5仿Apple Watch时钟动画不同的是,这个时钟呈现出挂在墙上的效果,看上去比较简洁和美观。

    jquery-clock-on-wall

    在线演示    源码下载

    9、纯CSS3 3D立体圆盘时钟动画

    我们已经分享过很多漂亮的圆盘时钟动画了,有基于jQuery的,也有基于HTML5和CSS3的,这其中也不乏SVG绘制的时钟动画。今天我们要继续给大家分享另外一款基于纯CSS3的3D立体圆盘时钟,它和其他圆盘时钟不一样,并不可以读取本地时间,并且实时更新。另外一个特点是它的外观呈现出3D立体的视觉效果,看起来非常酷。

    css3-3d-circle-clock

    在线演示    源码下载

    10、基于SVG的HTML5圆盘时钟动画

    前两天我们分享过一款基于SVG的圆盘时钟,可以有不同的时钟盘面。今天我们要再来分享另外一款基于SVG的HTML5圆盘时钟动画,和上一款类似,这款HTML5时钟也能准确获取本地的时间,并且秒针、分针、时针可以走动,效果还不错。

    html5-svg-clock-animation

    在线演示    源码下载

    11、15个超绚丽的HTML5 Canvas时钟动画特效

    之前我们有给大家介绍过很多基于HTML5的时钟动画,比如这款5种样式的HTML5 SVG圆盘时钟动画HTML5仿Apple Watch时钟动画,效果都很酷。这次要分享的是15个超绚丽的HTML5 Canvas时钟动画特效,它们很多都有各自不同的外观,有几个时钟的造型还非常新颖奇特,因为是基于HTML5 Canvas的,所以你的浏览器需要支持HTML5。

    html5-canvas-15-clock

    在线演示    源码下载

    12、jQuery/CSS3带数字时钟的圆盘时钟

    之前我们分享过很多基于jQuery和CSS3的时钟插件了,有数字时钟,今天要介绍的这款时钟插件是数字时钟和圆盘时钟的混合,也就是在圆盘时钟上嵌入了一个数字时钟,更加美观和实用。

    jquery-css3-digit-circle-clock

    在线演示    源码下载

    13、可爱的CSS3圆盘时钟动画

    之前我们分享过一些基于CSS3和jQuery的圆盘时钟,比如纯CSS3实现圆盘时钟动画HTML5/CSS3时尚的圆盘时钟动画。今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步。

    css3-circle-clock

    在线演示    源码下载

    14、纯CSS3实现圆盘时钟动画

    记得之前分享过一款基于SVG的HTML5圆盘时钟动画,效果还挺好的,今天我们继续为大家分享一款更酷的纯CSS3实现的圆盘时钟动画,这款时钟动画在初始化的时候就有动画特效,包括圆盘的形成,还有时钟指针的形成,都赋予了非常酷的动画色彩。

    pure-css3-clock

    在线演示    源码下载

    15、HTML5 Canvas 圆形时钟动画

    前不久我们刚为大家分享过一款很不错的jQuery/CSS3带数字时钟的圆盘时钟,效果很不错。今天我们要继续为大家介绍另外一个基于HTML5 Canvas的圆形时钟动画。它的功能非常简单,就是一个简单的时钟,时针分针和秒针的颜色各不相同。

    html5-canvas-circle-clock

    在线演示    源码下载

    以上就是15个超强悍的CSS3圆盘时钟动画,欢迎收藏分享。转载请注明原文链接:http://www.html5tricks.com/15-cool-css3-circle-clock.html

  • 相关阅读:
    前端发版后清理浏览器缓存处理
    CF235A 【LCM Challenge】
    CF39H 【Multiplication Table】
    CF171C 【A Piece of Cake】
    CF450A 【Jzzhu and Children】
    CF387B 【George and Round】
    火柴棒等式
    P1062 数列 题解
    P1045 麦森数
    (原创)最短路径那些事-1
  • 原文地址:https://www.cnblogs.com/html5tricks/p/8227804.html
Copyright © 2020-2023  润新知