今天给大家分享一款非常漂亮的纯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. Android面试，BroadCastReceiver的两种注册方式的异同

    在Android手机应用程序中开发中,需要用到BroadcastReceiver来监听广播的消息.在自定义好BroadcastReceiver ,需要对其进行注册,注册有两种方法: 一种是在代码当中注 ...

  2. linux 的命令 -exec 的使用

    linux中的 exec命令,-exec 后面跟的是linux的 command 命令,exec命令以分号结束‘:’, 该分号前面要放 反斜杠转义 . find . -name jquery.js - ...

  3. [译]使用scikit-learn进行机器学习的简介(教程1)

    原文:http://www.cnblogs.com/taceywong/p/4568806.html 原文地址:http://scikit-learn.org/stable/tutorial/basi ...

  4. Maven项目结合POI导出Excl表格Demo-亲测可用

    Maven项目结合POI导出Excl表格 一.POM文件添加依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> ...

  5. source insight中{}自动缩进的调整

    默认的自动缩进非常难看,解决方法如下: 菜单栏 -> Options -> document options ->点击右侧的 “Auto Indent...”按钮 将右侧" ...

  6. ant design pro （六）样式

    一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...

  7. UNIX网络编程卷2进程间通信读书笔记（二）—管道 （1）

    一．管道 管道的名称很形象,它就像是一个水管,我们从一端到水然后水从令一端流出.不同的是这里说的管道的两边都是进程.从一端往管道里写数据,其它进程可以从管道的另一端的把数据读出,从而实现了进程间通信的 ...

  8. Android WiFi热点7.1以上版本适配

    代码地址如下:http://www.demodashi.com/demo/13907.html 一.准备工作 开发环境:  jdk1.8  AS(3.0.1) 运行环境:  华为V10(Android ...

  9. HBase源代码分析之HRegionServer上MemStore的flush处理流程（一）

    在<HBase源代码分析之HRegion上MemStore的flsuh流程(一)>.<HBase源代码分析之HRegion上MemStore的flsuh流程(二)>等文中.我们 ...

  10. c#:无法将类型为“System.DBNull”的对象强制转换为类型“System.String”

    解决办法: 使用转换函数即可: Convert.ToString(要转换的值);