首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

利用纯html5绘制出来的一款非常漂亮的时钟

所属分类： 网页制作 / html5 阅读数： 1157
收藏 0 赞 0 分享

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

　　实现的代码。

　　htm代码：

XML/HTML Code复制内容到剪贴板
  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.             
    更多精彩内容其他人还在看

    HTML5梦幻之旅——炫丽的流星雨效果实现过程

    流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现，最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果
    收藏 0 赞 0 分享

    5个你不知道的HTML5的接口介绍

    尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API，本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API
    收藏 0 赞 0 分享

    HTML5 placeholder(空白提示)属性介绍

    浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性，placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏
    收藏 0 赞 0 分享

    HTML5 自动聚焦(autofocus)属性使用介绍

    一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成，感兴趣的朋友可以了解下
    收藏 0 赞 0 分享

    HTML5新增的Css选择器、伪类介绍

    HTML5新增了Css选择器、伪类，本文整理了一些，并给出简单的使用介绍，喜欢html5的朋友可以参考下，希望对大家有所帮助
    收藏 0 赞 0 分享

    通过Canvas及File API缩放并上传图片完整示例

    创建一个只管的用户界面，并允许你控制图片的大小。上传到服务器端的数据，并不需要处理enctype为 multi-part/form-data 的情况，仅仅一个简单的POST表单处理程序就可以了. 好了，下面附上完整的代码示例
    收藏 0 赞 0 分享

    Canvas与Image互相转换示例代码

    本文向大家展示怎样转换Image为canvas，以及canvas如何提取出一个Image，示例代码如下，有此需求的朋友可以参考下，希望对大家有所帮助
    收藏 0 赞 0 分享

    HTML5的语法变化介绍

    HTML5的语法变化主要体现在标签不再区分大小写、元素可以省略结束标签、允许省略属性值的属性等等，感兴趣的朋友可以参考下，希望对大家了解html5有所帮助
    收藏 0 赞 0 分享

    HTML5 预加载让页面得以快速呈现

    预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现
    收藏 0 赞 0 分享

    HTML5 input元素类型：email及url介绍

    HTML5改进的地方想必大家有所知晓，下面我要介绍的是两个新的input元素类型email和url。让我们跟着代码来看看他们的好处，感兴趣的朋友可以参考下
    收藏 0 赞 0 分享
    查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22