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

前端技术 2023/09/02 HTML

　　今天给大家分享一款非常漂亮的纯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)\"  

本文地址：https://www.stayed.cn/item/4751

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案