CSS3+SVG实现带秒针的复古圆盘表盘时钟

HTML5 herman 469浏览 0评论

模仿时钟走的动画网上也有很多,但是复古形式的不是很多。今天就借助 CSS3SVG 给大家制作一款带秒针的圆形时间表时钟动画。

在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间。

很多都是基于CSS3,也有一部分利用jQuerySVG。本文分享的时钟效果如下:

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

常见的是数字时钟和数字日历。也有一些基于jQueryCSS3的圆盘时钟动画。

也有一些 3D 立体形式的动画。但是今天要给大家带来一款比较复古的圆盘时钟,基于纯CSS3,盘面是SVG绘制而成,并没有使用任何图片。时钟整体外观比较怀旧,给人不一样的视觉感受。

由于CSS3代码和html代码都比较少,存在大量的javascript代码,因此我就不贴了,直接给大家一个百度网盘的下载地址。链接:https://pan.baidu.com/s/1jH4vCzW 密码:c1k8

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » CSS3+SVG实现带秒针的复古圆盘表盘时钟