资讯频道 → Web前端
阅读更多

15顶
1踩

Web前端

原创新闻 使用CSS创建时钟

2009-03-27 13:49 by 副主编 zly06 评论(8) 有10759人浏览
CSS webkit

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

如果你去过BBC网站，你一定会注意到网站右上方的时钟：

 


Paul Hayes创建了一个类似的模拟时钟，使用CSS来设计时钟的外形，使用JavaScript用来获取当前的时间。

 

 


真正的魔术在于CSS的转换，如：

/* -webkit-transition: property duration timing-function */


clock img[src*='hour'] {
-webkit-transform: rotate(90deg);
}

clock img[src*='second'] {
-webkit-transition: -webkit-transform 60s linear;
}

clock:target img[src*='second'] {
-webkit-transform: rotate(360deg);
}

 

来自: ajaxian
15
顶
1
踩
评论 共 8 条 请登录后发表评论
8 楼 Scriptlet 2009-03-28 23:06
webkit专有的东西...
7 楼 grave 2009-03-28 21:06
langhua9527 写道

好啊，居然去BBC，老实交待，怎么去滴。。。。

GFW不封BBC滴
6 楼 langhua9527 2009-03-28 12:15
好啊，居然去BBC，老实交待，怎么去滴。。。。
5 楼 gmizr 2009-03-28 11:22
说flash的同学没仔细看新闻
css时钟是模拟的bbc（flash）的时钟
4 楼 java.lang.Object 2009-03-28 11:15
只有safari和chrome下面才有效。
3 楼 nicky_hk 2009-03-28 11:10
gritlimu 写道

怎么会有flash？

我看了一下，也是flash！
2 楼 gritlimu 2009-03-28 10:00
怎么会有flash？
1 楼 whaosoft 2009-03-28 01:38
!! 很牛的ui程序员

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • CSS打造复古时钟-翻牌计时

    CSS打造复古时钟-翻牌计时

  • js-css-clock:该项目是使用CSS，CSS动画和JavaScript创建的时钟

    该项目是使用CSS ， CSS动画和JavaScript创建的时钟。 完成项目后，我解决了分针无法提前推进的问题，从而使秒针越过了12点就跳过了几秒钟。 分针也向后旋转90度。 我为此创建了一个修复程序，但是当我在Safari中对...

  • 使用 HTML、CSS 和 JavaScript 的简单模拟时钟

    如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种... 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示

  • 使用css制作动态时钟详细教程

    使用css制作动态时钟 完成效果： 步骤一： 创建一个宽高为300px圆形时钟的外表盘，边框加上阴影更好看一点，页面背景色为黑色 代码： <!DOCTYPE html> <html lang="en"> <head> <meta ...

  • 3、CSS动态时钟

    - 创建时针 -->-- 创建秒 -->-- 创建秒 -->/* 设置表的样式 */-- 创建表的容器 -->/* 设置关键帧 *//* 设置时针 *//* 设置分针 *//* 设置秒针 */

  • js-css-clock：JS + CSS时钟

    JS + CSS时钟 该项目是 （为期30天的原始JS编码挑战）中创建的。

  • 时钟插件-css+jquery

    使用HTML，CSS，SVG背景和一些jquery创建的时钟。使用CSS动画和过渡进行移动，使用jquery来设置初始时间并添加基本的CSS变换

  • CSS与JS结合完成时钟

    通过css与js结合完成时钟，这个时钟显示的是当前的时间，实现的效果是秒针每一秒走一格，即6弧度；分针每一分走一格，即6弧度；时针每10分钟走一格，即一小时旋转30弧度。 效果图如下： 1.Html部分：在html里面...

  • CSS+HTML+JavaScript一个简单的数字时钟

    制作一个和系统时间同步的数字时钟，主要运用了定时器以及日期对象；

  • html5 css3数字时钟,jQuery CSS3数字时钟

    插件描述：我们将用jQuery和CSS3 创建了一个数字时钟。并添加支持使用HTML5的音频元素设置警报。我们将用jQuery和CSS3 创建了一个数字时钟。并添加支持使用HTML5的音频元素设置警报。我们的想法为了扩大数字时钟报警...

  • vue2创建简易时钟

    vue2+纯css实现简易时钟

  • 刻度时钟和电子时钟

    刻度时钟和电子时钟的HTML+CSS+JS实现

  • 如何简单使用纯CSS3模仿时钟的指针转动

    纯css3模仿时钟时针转动 <link rel="stylesheet" href="css/animation.css"> <div class="box3"><a href="#" class="gt">></a></div> <div class="box4"><a href="#" class="lt"><</a></div> ...

  • Clock-UI:我已经使用html css和js创建了模拟手表

    时钟界面我已经使用html css和纯javascript创建了模拟手表，U可以使pr进行一些新设计的设计。 这是时钟的链接，一旦检查它..

  • 使用 HTML、CSS 和 JS 的简单倒数计时器

    在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定...

  • html 时钟怎样居中,怎么用css3做时钟刻度

    拿其中5个刻度为例，代码如下：html代码布局：css样式表：(相关课程推荐：css视频教程)/* 清除默认样式 */*{margin: 0;padding: 0}li{list-style: none}/* 将表盘设置成半径为100px的原型，并为其加上边框 */#ul1{...

  • CSS神器：使用纯CSS制作交互性时钟

    在本文中，我们将讨论如何使用CSS创建一个有趣且实用的示例：一个交互式的时钟。如果你希望更深入地了解CSS的知识，请阅读我们的其他CSS教程和学习资料，它们将帮助你进一步掌握各种CSS属性和技巧，以及如何将它们...

  • css3：旋转礼盒动画与时钟动画

    css3案例用到的知识通过css3中的3D动画控制X，Y，方向的值来实现动画通过css3中的平移，缩放，旋转，圆角，渐变，可选功能来控制元素的样式通过1@keyframes创建动画通过css3中的过度效果设置过度时间来使动画更加...

  • HTML创建简单动态时钟

    欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！介绍动态时钟，...

  • 123_CSS样式制作时钟

    以下为背景图片： 以下为源代码： <...CSS实现时钟效果</title> <style type="text/css"> .clock { width: 500px; height: 500px; /* border: 10px solid black; */

Global site tag (gtag.js) - Google Analytics