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

在线预览   源码下载

实现的代码。

html代码：

 <div class="container">

        <svg width="600" height="600" class='svg-element'>

    <filter id="f4" x="-50%" y="-20%" width="200%" height="140%">

      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" />

      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

    </filter>

  <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">

    <feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>

  </filter>

    <filter id="inset-shadow">

        <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->

        <feGaussianBlur stdDeviation="15"  result="offset-blur"/>                           <!-- Shadow Blur -->

        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->

        <feFlood flood-color="black" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->

        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->

        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->

            <feFuncA type="linear" slope="1"/>

        </feComponentTransfer>

        <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->

    </filter>

    <filter id="inset-shadow-big">

        <feOffset dx="0" dy="4"/>                                                         <!-- Shadow Offset -->

        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->

        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->

        <feFlood flood-color="white" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->

        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->

        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->

            <feFuncA type="linear" slope="0.5"/>

        </feComponentTransfer>

        <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->

    </filter>

    <filter id="inset-shadow-big-bottom">

        <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->

        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->

        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->

        <feFlood flood-color="#FFF" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->

        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->

        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->

            <feFuncA type="linear" slope="0.5"/>

        </feComponentTransfer>

        <feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>                    <!-- Put shadow over original object -->

        <feOffset dx="0" dy="-12"/>                                                         <!-- Shadow Offset -->

        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->

        <feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->

        <feFlood flood-color="#69c39b" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->

        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->

        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->

            <feFuncA type="linear" slope="0.5"/>

        </feComponentTransfer>

        <feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>                    <!-- Put shadow over original object -->

    </filter>

    <linearGradient id="LG"

                    gradientTransform="rotate(90 .5 .5)">

      <stop id="s0" offset="0" stop-color="#d6f8e9"/>

      <stop id="s2" offset="1" stop-color="#9ee1c4"/>

    </linearGradient>

    <linearGradient id="LG2"

                    gradientTransform="rotate(-90 .5 .5)">

      <stop id="s0" offset="0.07" stop-color="#fdfefe"/>

      <stop id="s1" offset="0.5" stop-color="#98e2c2"/>

      <stop id="s2" offset="0.8" stop-color="#79c9a7"/>

      <stop id="s3" offset="1" stop-color="#5fbc95"/>

    </linearGradient>

    <linearGradient id="arrow1"

                    gradientTransform="rotate(-90 .5 .5)">

      <stop id="s0" offset="0" stop-color="#07594f"/>

      <stop id="s2" offset="1" stop-color="#01443c"/>

    </linearGradient>

    <linearGradient id="arrowRed"

                    gradientTransform="rotate(-90 .5 .5)">

      <stop id="s0" offset="0" stop-color="#fd5959"/>

      <stop id="s2" offset="1" stop-color="#fe7c7c"/>

    </linearGradient>

    <linearGradient id="center-knob-outter"

                    gradientTransform="rotate(90 .5 .5)">

      <stop id="s0" offset="0" stop-color="#fffefe"/>

      <stop id="s2" offset="1" stop-color="#86ecdb"/>

    </linearGradient>

        <linearGradient id="center-knob-inner"

                    gradientTransform="rotate(90 .5 .5)">

      <stop id="s0" offset="0" stop-color="#a0dcd2"/>

      <stop id="s2" offset="1" stop-color="#dff9ef"/>

    </linearGradient>

    <g transform="translate(50, 20)">

      <rect x="0" y="0"

          width="382" height="382"

          fill="url(#LG)"

          filter="url(#inset-shadow-big-bottom)"

          rx="75" ry="105" />

    <circle cx="191" cy="191" r="155" fill="url(#LG2)"/>

    <circle cx="191" cy="191" r="130" fill="#53d2c5"/>

    <circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />

      <g width="200" height="200"

       transform="translate(100, 100)">

       <animateTransform attributeName="transform" type="translate" dur="4s"

       values="191,191;191,191" repeatCount="indefinite"/>

       <animateTransform attributeName="transform" additive="sum" type="rotate"

       dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>

          <rect x="0" y="0"

                width="22" height="70"

                fill="url(#arrow1)"

                fill-opacity="0.5"

                filter="url(#blurred-source)"

                rx="10" ry="10"

                transform="translate(-11, -15)" />

    </g>  

    <g width="200" height="200"

       transform="translate(100, 100)">

       <animateTransform attributeName="transform" type="translate" dur="4s"

       values="191,191;191,191" repeatCount="indefinite"/>

       <animateTransform attributeName="transform" additive="sum" type="rotate"

       dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>

          <rect x="0" y="0"

                width="20" height="70"

                fill="url(#arrow1)"

                rx="10" ry="10"

                transform="translate(-10, -10)" />

    </g>

      <g width="200" height="200"

       transform="translate(100, 100)">

       <animateTransform attributeName="transform" type="translate" dur="4s"

       values="191,191;191,191" repeatCount="indefinite"/>

       <animateTransform attributeName="transform" additive="sum" type="rotate"

       dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>

      <rect x="0" y="0"

            width="18" height="104"

            fill="url(#arrow1)"

            fill-opacity="0.8"

            filter="url(#blurred-source)"

            rx="8" ry="8"

            transform="translate(-9, -15)"> />

    </g>   

    <g width="200" height="200"

       transform="translate(100, 100)">

       <animateTransform attributeName="transform" type="translate" dur="4s"

       values="191,191;191,191" repeatCount="indefinite"/>

       <animateTransform attributeName="transform" additive="sum" type="rotate"

       dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>

      <rect x="0" y="0"

            width="16" height="104"

            fill="url(#arrow1)"

            rx="8" ry="8"

            transform="translate(-8, -8)"> />

    </g>

     <g width="200" height="200">

       <animateTransform attributeName="transform" type="translate" dur="4s"

       values="195,195;190,195" repeatCount="indefinite"/>

       <animateTransform attributeName="transform" additive="sum" type="rotate"

       dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>

      <rect class="arrowRed"

            x="0" y="0"

            width="8" height="120"

            fill="url(#arrowRed)"

            filter="url(#blurred-source)"

            fill-opacity="0.5"

            rx="3" ry="3"

            transform="translate(-3, -20)"/>

    </g>

    <g width="200" height="200"

       transform="translate(100, 100)">

       <animateTransform attributeName="transform" type="translate" dur="4s"

       values="191,191;191,191" repeatCount="indefinite"/>

       <animateTransform attributeName="transform" additive="sum" type="rotate"

       dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>

      <rect class="arrowRed"

            x="0" y="0"

            width="6" height="134"

            fill="url(#arrowRed)"

            rx="3" ry="3"

            transform="translate(-3, -20)"/>

    </g>

    <g width="200" height="200"

       transform="translate(191, 191)">

      <circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"/>

      <circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"/>

    </g>

<!--      <path d="M 200 20

                200 40

                180 30 z">-->

      </g>

    </div>

css代码：

   .container

        {

            text-align: center;

            width: 100%;

            margin-top: 20px;

            padding: 20px;

        }

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. 使用jQuery通过点击它删除HTML表格行-超简单

    jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一.它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容.我已经写了许多关于jQuery教程, ...

  2. Hibernate 延迟载入

    一.延迟载入定义                 延迟载入,也叫懒载入,它是Hibernate为提高程序运行效率而提供的一种机制,即当仅仅有真正使用该对象的数据时才会创建. 说白了,所谓的延迟载入不是 ...

  3. 小课堂week18 编程范式巡礼第三季 谈谈依赖反转

    编程范式巡礼第三季--谈谈依赖反转 今天会进入深一点的主题,谈一个软件开发的"道":依赖反转.根据我的观察,这也是架构师与程序员的分水岭之一. 什么是依赖反转 引出问题 让我们从U ...

  4. scala lambda 小括号与大括号

    看akka源码的时候看到这样的一个用法: 作为接触scala两天半的我有些看不明白了.好一番搜索看到这样的答案: <scala雾中风景(2): 小括号与花括号> 下面的问题,表面上看是小括 ...

  5. 裸裸的线段树（hdu 1754）

    线段树的第一发. 哪天忘了还能够让自己找找回顾. 线段树操作: build  : 建树. update:点改动: query:查询 Input 在每一个測试的第一行,有两个正整数 N 和 M ( 0& ...

  6. UDP socket也可以使用connect系统调用

    UDP socket也可以使用connect系统调用 UDP是一个无连接的协议,因此socket函数connect()似乎对UDP是没有意义的,然而事实不是这样.它可以用来指定本地端口和本地地址,来建 ...

  7. Eclipse Kepler 设置中文编码 和 汉化

    以下是 mac 下 Eclipse Kepper的设置 一:设置中文编码 1:打开Eclipse--Preference-->general--->editor---->Spelli ...

  8. NFS服务的配置与应用

    一.NFS服务概述 NFS(Network File System),即网络文件系统,是使不同计算机之间能够通过网络进行文件共享的一种网络协议,多用于Linux/Unix网络系统中. 一台NFS服务器 ...

  9. $.post以后就取不到$(this)节点解决方法【转】

    在作用域开头最好把以后要用的this指针存起来 a.click(function(){ var $this=$(this); $.get("/a").always( $this.v ...

  10. 【Oracle】IMP-00010: not a valid export file, header failed verification

    别人给了一个Oracle文件,结果在导入的时候发现有问题,报错如下: IMP-00010: not a valid export file, header failed verification 在网 ...