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

html教程 跟版网
今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。下面我们来看看具体实现的代码，需要的朋友可以参考下

　　今天给大家分享一款非常漂亮的纯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.             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.        
  188.     <g width="200" height="200"  
  189.        transform="translate(100, 100)">  
  190.        <animateTransform attributeName="transform" type="translate" dur="4s"    
  191.        values="191,191;191,191" repeatCount="indefinite"/>  
  192.        <animateTransform attributeName="transform" additive="sum" type="rotate"    
  193.        dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>  
  194.          
  195.       <rect class="arrowRed"  
  196.             x="0" y="0"  
  197.             width="6" height="134"    
  198.             fill="url(#arrowRed)"  
  199.             rx="3" ry="3"  
  200.             transform="translate(-3, -20)"/>  
  201.     </g>  
  202.          
  203.   
  204.        
  205.            
  206.     <g width="200" height="200"  
  207.        transform="translate(191, 191)">  
  208.          
  209.       <circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"/>  
  210.       <circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"/>  
  211.     </g>  
  212.          
  213. <!--      <path d="M 200 20    
  214.                 200 40    
  215.                 180 30 z">-->  
  216.   
  217.       </g>  
  218.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板
  1. .container   
  2.         {   
  3.             text-align: center;   
  4.             width: 100%;   
  5.             margin-top: 20px;   
  6.             padding: 20px;   
  7.         }  
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

会走动的图形html5时钟示例
这篇文章主要介绍了会走动的图形html5时钟示例,需要的朋友可以参考下
html5时钟实现代码
html5下实现的闹钟代码，喜欢的朋友可以参考下。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室