首页前端开发HTML利用纯html5绘制出来的一款非常漂亮的时钟

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

时间2024-01-24 12:53:18发布访客分类HTML浏览1044
导读：收集整理的这篇文章主要介绍了利用纯html5绘制出来的一款非常漂亮的时钟，觉得挺不错的，现在分享给大家，也给大家做个参考。 今天给大家分享一款非常漂亮的纯htML5实现的时钟。整个界面都由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.         }   

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

上一篇: HTML5 Canvas绘制圆点虚线实例下一篇:HTML页面中添加Canvas标签示例猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处： 利用纯html5绘制出来的一款非常漂亮的时钟
本文地址： https://pptw.com/jishu/585401.html
HTML5 audio标签使用js进行播放控制实例 Html5+JS实现手机摇一摇功能

游客 回复需填写必要信息
↑