社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > H5教程 > 利用纯html5绘制出来的一款非常漂亮的时钟_html5教程技巧

利用纯html5绘制出来的一款非常漂亮的时钟_html5教程技巧

WBOY
发布： 2016-05-16 15:46:58
原创
1753 人浏览过

　　今天给大家分享一款非常漂亮的纯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"/>                                                           
  16.         feGaussianBlur stdDeviation="15"  result="offset-blur"/>                             
  17.         feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>   
  18.         feFlood flood-color="black" flood-opacity="1" result="color"/>                       
  19.         feComposite operator="in" in="color" in2="inverse" result="shadow"/>                 
  20.         feComponentTransfer in="shadow" result="shadow">                                     
  21.             feFuncA type="linear" slope="1"/>  
  22.         feComponentTransfer>  
  23.         feComposite operator="over" in="shadow" in2="SourceGraphic"/>                      
  24.     filter>  
  25.        
  26.     filter id="inset-shadow-big">  
  27.         feOffset dx="0" dy="4"/>                                                           
  28.         feGaussianBlur stdDeviation="2"  result="offset-blur"/>                             
  29.         feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>   
  30.         feFlood flood-color="white" flood-opacity="1" result="color"/>                       
  31.         feComposite operator="in" in="color" in2="inverse" result="shadow"/>                 
  32.         feComponentTransfer in="shadow" result="shadow">                                     
  33.             feFuncA type="linear" slope="0.5"/>  
  34.         feComponentTransfer>  
  35.         feComposite operator="over" in="shadow" in2="SourceGraphic"/>                      
  36.     filter>  
  37.        
  38.     filter id="inset-shadow-big-bottom">  
  39.         feOffset dx="0" dy="10"/>                                                           
  40.         feGaussianBlur stdDeviation="2"  result="offset-blur"/>                             
  41.         feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>   
  42.         feFlood flood-color="#FFF" flood-opacity="1" result="color"/>                       
  43.         feComposite operator="in" in="color" in2="inverse" result="shadow"/>                 
  44.         feComponentTransfer in="shadow" result="shadow">                                     
  45.             feFuncA type="linear" slope="0.5"/>  
  46.         feComponentTransfer>  
  47.         feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>                      
  48.          
  49.         feOffset dx="0" dy="-12"/>                                                           
  50.         feGaussianBlur stdDeviation="2"  result="offset-blur"/>                             
  51.         feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/>   
  52.         feFlood flood-color="#69c39b" flood-opacity="1" result="color"/>                       
  53.         feComposite operator="in" in="color" in2="inverse" result="shadow"/>                 
  54.         feComponentTransfer in="shadow" result="shadow">                                     
  55.             feFuncA type="linear" slope="0.5"/>  
  56.         feComponentTransfer>  
  57.         feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>                      
  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)"  
相关标签：
html5时钟
来源：php.cn
上一篇：HTML5 video播放器全屏(fullScreen)方法实例_html5教程技巧 下一篇：浅谈html5 响应式布局_html5教程技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何在 PHP 中使午夜工作以截断时间？ 这不会将时间设置为午夜：newDateTime('firstdayof-1monthmidnight')就好像midnight不存在一样。在PHP7.3.33和PHP8.2.4中测...
来自于 2024-04-03 13:48:12
0
1
332
使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...
来自于 2024-04-01 20:42:38
0
1
259
限制折叠手风琴段的高度 Bootstrap 5 Vue3 我正在使用Vue3和bootstrap5构建一个网络应用程序。但我认为这个问题只涉及bootstrap。我想要做的是限制折叠的手风琴段的高度，这样当其内容很长时，它不会将其他段踢得...
来自于 2024-03-31 21:56:54
0
1
332
每分钟通知 API，无需依赖用户重新加载 这就是我现在所拥有的。在我的Mount()上，我有fetchCoins()，但这使得每当用户刷新时，就会调用API我正在尝试调用API，数据存储在本地存储中，然后每分钟获取一次数据...
来自于 2024-03-31 14:34:11
0
1
336
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板