• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    利用纯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 Canvas绘制圆点虚线实例
    下一篇：HTML5学习笔记之History API
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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