search

Home >Web Front-end >H5 Tutorial >A very beautiful clock drawn using pure HTML5_html5 tutorial skills

A very beautiful clock drawn using pure HTML5_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:46:581762browse

Today I would like to share with you a very beautiful clock implemented in pure HTML5. The entire interface is drawn with html5. Let’s take a look at the renderings:

Implementation code.

　htm code:

XML/HTML CodeCopy content to clipboard
  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)"  
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 video player full screen (fullScreen) method example_html5 tutorial skillsNext article：HTML5 video player full screen (fullScreen) method example_html5 tutorial skills

Related articles

See more