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

　　实现的代码。

　　htm代码：

XML/HTML Code复制内容到剪贴板


 
 
 
 
 
 
 
  
 
  
 
  
 
  
 
  
 
 
 
  
 
  
 
  
 
 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 
  
 
 
 
 
 
 gradientTransform="rotate(90 .5 .5)"> 
 
  
 
  
 
  
 
 
 
 
 
 gradientTransform="rotate(-90 .5 .5)"> 
 
  
 
  
 
  
 
  
 
  
 
 
 
 
 
 gradientTransform="rotate(-90 .5 .5)"> 
 
  
 
  
 
  
 
 
 
 
 
 gradientTransform="rotate(-90 .5 .5)"> 
 
  
 
  
 
  
 
 
 
 
 
 gradientTransform="rotate(90 .5 .5)"> 
 
  
 
  
 
  
 
 
 
 
 
 gradientTransform="rotate(90 .5 .5)"> 
 
  
 
  
 
  
 
 
 
  
 
 
 
 
 
 width="382" height="382" 
 
 fill="url(#LG)" 
 
 filter="url(#inset-shadow-big-bottom)" 
 
 rx="75" ry="105" /> 
 
 
 
  
 
  
 
  
 
 
 
 
 
 transform="translate(100, 100)"> 
 
 
 
 values="191,191;191,191" repeatCount="indefinite"/> 
 
 
 
 dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/> 
 
 
 
 
 
 width="22" height="70" 
 
 fill="url(#arrow1)" 
 
 fill-opacity="0.5" 
 
 filter="url(#blurred-source)" 
 
 rx="10" ry="10" 
 
 transform="translate(-11, -15)" /> 
 
  
 
 
 
 
 
 transform="translate(100, 100)"> 
 
 
 
 values="191,191;191,191" repeatCount="indefinite"/> 
 
 
 
 dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/> 
 
 
 
 
 
 width="20" height="70" 
 
 fill="url(#arrow1)" 
 
 rx="10" ry="10" 
 
 transform="translate(-10, -10)" /> 
 
  
 
 
 
 
 
 transform="translate(100, 100)"> 
 
 
 
 values="191,191;191,191" repeatCount="indefinite"/> 
 
 
 
 dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/> 
 
 
 
 
 
 width="18" height="104" 
 
 fill="url(#arrow1)" 
 
 fill-opacity="0.8" 
 
 filter="url(#blurred-source)"