DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 利用純html5繪制出來的一款非常漂亮的時鐘
利用純html5繪制出來的一款非常漂亮的時鐘
編輯：HTML5詳解     
今天給大家分享一款非常漂亮的純Html5實現的時鐘。整個界面都由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詳解
HTML5和以前HTML4的區別整理
HTML5是HTML標准的下一個版本。雖然HTML5沒有完全顛覆HTML4，但是它們也有一些不同。
HTML5 Canvas模擬loading實例
這個例子是Html5 Canvas模擬網頁loading加載實例。效果圖如下： 該實例代
使用HTML5/CSS3快速制作便簽貼特效
本篇文字將展示給你的是，如何利用Html5/CSS3，僅用5步就可以制作便簽貼效果的Html頁面，

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
不寫代碼制作可定制微卡 詳細介紹jQuery.outerWidth() 函數具體用法 Grunt 使用說明 陀螺儀控件的使用 跟KingDZ學HTML5之二：再見Audio和Video html5的canvas實現3d雪花飄舞效果 HTML5 Canvas的事件處理介紹 HTML5之SVG 2D入門6—視窗坐標系與用戶坐標系及變換概述 使用html5 canvas創建太空游戲的示例 HTML5實現晶瑩剔透的雨滴特效
熱門推薦
使用分層畫布來優化HTML5渲染的教程 HTML5 CANVAS制圖 基礎總結 突襲HTML5之Javascript API擴展5―其他擴展(應用緩存/服務端消息/桌面通知) HTML5浏覽器兼容性測試 html5案例分析：制作跨屏互動游戲 html5畫布旋轉效果示例 Mugeda HTML5富媒體平台簡介 HTML5的規范和開發 課程介紹 HTML5學習筆記——input
大家都在看
多個datatable共存造成多個表格的checkbox都被選中 jQuery動態地獲取系統時間實現代碼 【網頁設計】分享E-WebTemplates國外精美網頁模板（FLASH+PSD源文件+HTML） XML定制超越傳統界限的開放XML JQUERY實現左側TIPS滑進滑出效果示例 javascript中解析四則運算表達式的算法和示例 讓網站變灰的css代碼 JavaScript中instanceof運算符的使用示例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved