今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

  1.  <div class="container">
  2.         <svg width="600" height="600" class='svg-element'>
  3.  
  4.     <filter id="f4" x="-50%" y="-20%" width="200%" height="140%">
  5.       <feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" />
  6.       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  7.       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  8.     </filter>
  9.  
  10.   <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">
  11.     <feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>
  12.   </filter>
  13.  
  14.     <filter id="inset-shadow">
  15.         <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->
  16.         <feGaussianBlur stdDeviation="15"  result="offset-blur"/>                           <!-- Shadow Blur -->
  17.         <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  18.         <feFlood flood-color="black" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
  19.         <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
  20.         <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
  21.             <feFuncA type="linear" slope="1"/>
  22.         </feComponentTransfer>
  23.         <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->
  24.     </filter>
  25.  
  26.     <filter id="inset-shadow-big">
  27.         <feOffset dx="0" dy="4"/>                                                         <!-- Shadow Offset -->
  28.         <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
  29.         <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  30.         <feFlood flood-color="white" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
  31.         <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
  32.         <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
  33.             <feFuncA type="linear" slope="0.5"/>
  34.         </feComponentTransfer>
  35.         <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->
  36.     </filter>
  37.  
  38.     <filter id="inset-shadow-big-bottom">
  39.         <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->
  40.         <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
  41.         <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  42.         <feFlood flood-color="#FFF" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
  43.         <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
  44.         <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
  45.             <feFuncA type="linear" slope="0.5"/>
  46.         </feComponentTransfer>
  47.         <feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>                    <!-- Put shadow over original object -->
  48.  
  49.         <feOffset dx="0" dy="-12"/>                                                         <!-- Shadow Offset -->
  50.         <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
  51.         <feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
  52.         <feFlood flood-color="#69c39b" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
  53.         <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
  54.         <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
  55.             <feFuncA type="linear" slope="0.5"/>
  56.         </feComponentTransfer>
  57.         <feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>                    <!-- Put shadow over original object -->
  58.  
  59.     </filter>
  60.  
  61.     <linearGradient id="LG"
  62.                     gradientTransform="rotate(90 .5 .5)">
  63.       <stop id="s0" offset="0" stop-color="#d6f8e9"/>
  64.       <stop id="s2" offset="1" stop-color="#9ee1c4"/>
  65.     </linearGradient>
  66.  
  67.     <linearGradient id="LG2"
  68.                     gradientTransform="rotate(-90 .5 .5)">
  69.       <stop id="s0" offset="0.07" stop-color="#fdfefe"/>
  70.       <stop id="s1" offset="0.5" stop-color="#98e2c2"/>
  71.       <stop id="s2" offset="0.8" stop-color="#79c9a7"/>
  72.       <stop id="s3" offset="1" stop-color="#5fbc95"/>
  73.     </linearGradient>
  74.  
  75.     <linearGradient id="arrow1"
  76.                     gradientTransform="rotate(-90 .5 .5)">
  77.       <stop id="s0" offset="0" stop-color="#07594f"/>
  78.       <stop id="s2" offset="1" stop-color="#01443c"/>
  79.     </linearGradient>
  80.  
  81.     <linearGradient id="arrowRed"
  82.                     gradientTransform="rotate(-90 .5 .5)">
  83.       <stop id="s0" offset="0" stop-color="#fd5959"/>
  84.       <stop id="s2" offset="1" stop-color="#fe7c7c"/>
  85.     </linearGradient>
  86.  
  87.     <linearGradient id="center-knob-outter"
  88.                     gradientTransform="rotate(90 .5 .5)">
  89.       <stop id="s0" offset="0" stop-color="#fffefe"/>
  90.       <stop id="s2" offset="1" stop-color="#86ecdb"/>
  91.     </linearGradient>
  92.  
  93.         <linearGradient id="center-knob-inner"
  94.                     gradientTransform="rotate(90 .5 .5)">
  95.       <stop id="s0" offset="0" stop-color="#a0dcd2"/>
  96.       <stop id="s2" offset="1" stop-color="#dff9ef"/>
  97.     </linearGradient>
  98.  
  99.     <g transform="translate(50, 20)">
  100.  
  101.       <rect x="0" y="0"
  102.           width="382" height="382"
  103.           fill="url(#LG)"
  104.           filter="url(#inset-shadow-big-bottom)"
  105.           rx="75" ry="105" />
  106.  
  107.     <circle cx="191" cy="191" r="155" fill="url(#LG2)"/>
  108.     <circle cx="191" cy="191" r="130" fill="#53d2c5"/>
  109.     <circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />
  110.  
  111.       <g width="200" height="200"
  112.        transform="translate(100, 100)">
  113.        <animateTransform attributeName="transform" type="translate" dur="4s"
  114.        values="191,191;191,191" repeatCount="indefinite"/>
  115.        <animateTransform attributeName="transform" additive="sum" type="rotate"
  116.        dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
  117.  
  118.           <rect x="0" y="0"
  119.                 width="22" height="70"
  120.                 fill="url(#arrow1)"
  121.                 fill-opacity="0.5"
  122.                 filter="url(#blurred-source)"
  123.                 rx="10" ry="10"
  124.                 transform="translate(-11, -15)" />
  125.     </g>  
  126.  
  127.     <g width="200" height="200"
  128.        transform="translate(100, 100)">
  129.        <animateTransform attributeName="transform" type="translate" dur="4s"
  130.        values="191,191;191,191" repeatCount="indefinite"/>
  131.        <animateTransform attributeName="transform" additive="sum" type="rotate"
  132.        dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
  133.  
  134.           <rect x="0" y="0"
  135.                 width="20" height="70"
  136.                 fill="url(#arrow1)"
  137.                 rx="10" ry="10"
  138.                 transform="translate(-10, -10)" />
  139.     </g>
  140.  
  141.       <g width="200" height="200"
  142.        transform="translate(100, 100)">
  143.        <animateTransform attributeName="transform" type="translate" dur="4s"
  144.        values="191,191;191,191" repeatCount="indefinite"/>
  145.        <animateTransform attributeName="transform" additive="sum" type="rotate"
  146.        dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
  147.  
  148.       <rect x="0" y="0"
  149.             width="18" height="104"
  150.             fill="url(#arrow1)"
  151.             fill-opacity="0.8"
  152.             filter="url(#blurred-source)"
  153.             rx="8" ry="8"
  154.             transform="translate(-9, -15)"> />
  155.     </g>   
  156.  
  157.     <g width="200" height="200"
  158.        transform="translate(100, 100)">
  159.        <animateTransform attributeName="transform" type="translate" dur="4s"
  160.        values="191,191;191,191" repeatCount="indefinite"/>
  161.        <animateTransform attributeName="transform" additive="sum" type="rotate"
  162.        dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
  163.  
  164.       <rect x="0" y="0"
  165.             width="16" height="104"
  166.             fill="url(#arrow1)"
  167.             rx="8" ry="8"
  168.             transform="translate(-8, -8)"> />
  169.     </g>
  170.  
  171.      <g width="200" height="200">
  172.        <animateTransform attributeName="transform" type="translate" dur="4s"
  173.        values="195,195;190,195" repeatCount="indefinite"/>
  174.        <animateTransform attributeName="transform" additive="sum" type="rotate"
  175.        dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>
  176.  
  177.       <rect class="arrowRed"
  178.             x="0" y="0"
  179.             width="8" height="120"
  180.             fill="url(#arrowRed)"
  181.             filter="url(#blurred-source)"
  182.             fill-opacity="0.5"
  183.             rx="3" ry="3"
  184.             transform="translate(-3, -20)"/>
  185.     </g>
  186.  
  187.     <g width="200" height="200"
  188.        transform="translate(100, 100)">
  189.        <animateTransform attributeName="transform" type="translate" dur="4s"
  190.        values="191,191;191,191" repeatCount="indefinite"/>
  191.        <animateTransform attributeName="transform" additive="sum" type="rotate"
  192.        dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>
  193.  
  194.       <rect class="arrowRed"
  195.             x="0" y="0"
  196.             width="6" height="134"
  197.             fill="url(#arrowRed)"
  198.             rx="3" ry="3"
  199.             transform="translate(-3, -20)"/>
  200.     </g>
  201.  
  202.     <g width="200" height="200"
  203.        transform="translate(191, 191)">
  204.  
  205.       <circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"/>
  206.       <circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"/>
  207.     </g>
  208.  
  209. <!--      <path d="M 200 20
  210.                 200 40
  211.                 180 30 z">-->
  212.  
  213.       </g>
  214.     </div>

css代码：

  1.    .container
  2.         {
  3.             text-align: center;
  4.             width: 100%;
  5.             margin-top: 20px;
  6.             padding: 20px;
  7.         }

via:http://www.w2bc.com/Article/12747

一款纯html5实现的时钟的更多相关文章

  1. 一款纯html5实现的人跑步动画

    今天给大家分享一款纯html5实现的人跑步动画.这款动画中实现了人跑步的动画,且上面有三个按钮,分别是选择让这个跑步的拿什么武器,第一个是拿了一把剑,第二个是拿了一把斧头,第三个是不拿任保东西.效果图 ...

  2. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  3. 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  4. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  5. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  6. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  7. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  8. 一款纯css3实现的漂亮的404页面

    之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...

  9. 一款纯css3实现的tab选项卡

    今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

随机推荐

  1. Node.js：Express 框架

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完整功能的网站 ...

  2. Ubuntu挂载samba共享目录

    Ubuntu中现在没有smbfs了,所以smbmount命令也用不了了,现在可以使用mount.cifs命令来挂载. Usage:  mount.cifs <remotetarget> & ...

  3. 开发自己的One Page Scroll插件（二）

    开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...

  4. haproxy综合

    常见问题:haproxy启动报错Starting proxy : cannot bind socket?答:查看haproxy.conf配置文件发现其监听80跟apache冲突,而apache没在使用 ...

  5. linux嵌入式系统交叉开发环境

    交叉开发的特点是使用交叉开发环境编译出目标机上可以运行的二进制程序. tool chain就是一整套的交叉开发工具,包括cross assembler.cross compiler. cross li ...

  6. HDU4626+博弈

    博弈... /* 博弈 对于当前人来说,如果完成自己的操作后,若mat[n][m]==0,则自己是胜者. 因为 如果mat其他位置不存在1了,肯定自己胜:如果存在1,则让下一位去反转那个1. */ # ...

  7. 算法笔记_140:最小费用最大流问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 在最大流有多组解时,给每条边在附上一个单位费用的量,问在满足最大流时的最小费用是多少? 2 解决方案 下面代码所使用的测试数据如下图: 具体代码如下 ...

  8. KVM虚拟化学习笔记系列文章列表（转）

    Kernel-based Virtual Machine KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之k ...

  9. Quartz+SpringMVC实现web定时管理任务

    代码地址如下:http://www.demodashi.com/demo/13978.html 使用背景 相信大家在工作过程中,肯定会遇到很多任务定时执行,修改定时任务的时间,执行一次定时任务等等.下 ...

  10. dom与jquery互相转换

    /*取得<input>标签中的value属性的内容[dom对象->jquery对象] var inputElement = document.getElementById(" ...