一款纯html5实现的时钟

今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

 <div class="container">
        <svg width="600" height="600" class='svg-element'>
    
    <filter id="f4" x="-50%" y="-20%" width="200%" height="140%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
    
  <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">
    <feGaussianBlur in="color" stdDeviation="5" result="blurOut"/>
  </filter>
     
    <filter id="inset-shadow">
        <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="15"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="black" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="1"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->
    </filter>
    
    <filter id="inset-shadow-big">
        <feOffset dx="0" dy="4"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="white" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="0.5"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="SourceGraphic"/>                    <!-- Put shadow over original object -->
    </filter>
    
    <filter id="inset-shadow-big-bottom">
        <feOffset dx="0" dy="10"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="#FFF" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="0.5"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1'/>                    <!-- Put shadow over original object -->
      
        <feOffset dx="0" dy="-12"/>                                                         <!-- Shadow Offset -->
        <feGaussianBlur stdDeviation="2"  result="offset-blur"/>                           <!-- Shadow Blur -->
        <feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
        <feFlood flood-color="#69c39b" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
        <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
        <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
            <feFuncA type="linear" slope="0.5"/>
        </feComponentTransfer>
        <feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2'/>                    <!-- Put shadow over original object -->
      
    </filter>
    
    <linearGradient id="LG"
                    gradientTransform="rotate(90 .5 .5)">      
      <stop id="s0" offset="0" stop-color="#d6f8e9"/>
      <stop id="s2" offset="1" stop-color="#9ee1c4"/>
    </linearGradient>
    
    <linearGradient id="LG2"
                    gradientTransform="rotate(-90 .5 .5)">      
      <stop id="s0" offset="0.07" stop-color="#fdfefe"/>
      <stop id="s1" offset="0.5" stop-color="#98e2c2"/>
      <stop id="s2" offset="0.8" stop-color="#79c9a7"/>
      <stop id="s3" offset="1" stop-color="#5fbc95"/>
    </linearGradient>
    
    <linearGradient id="arrow1"
                    gradientTransform="rotate(-90 .5 .5)">      
      <stop id="s0" offset="0" stop-color="#07594f"/>
      <stop id="s2" offset="1" stop-color="#01443c"/>
    </linearGradient>
    
    <linearGradient id="arrowRed"
                    gradientTransform="rotate(-90 .5 .5)">      
      <stop id="s0" offset="0" stop-color="#fd5959"/>
      <stop id="s2" offset="1" stop-color="#fe7c7c"/>
    </linearGradient>
    
    <linearGradient id="center-knob-outter"
                    gradientTransform="rotate(90 .5 .5)">      
      <stop id="s0" offset="0" stop-color="#fffefe"/>
      <stop id="s2" offset="1" stop-color="#86ecdb"/>
    </linearGradient>
    
        <linearGradient id="center-knob-inner"
                    gradientTransform="rotate(90 .5 .5)">      
      <stop id="s0" offset="0" stop-color="#a0dcd2"/>
      <stop id="s2" offset="1" stop-color="#dff9ef"/>
    </linearGradient>
    
    <g transform="translate(50, 20)">
      
      <rect x="0" y="0"
          width="382" height="382" 
          fill="url(#LG)"
          filter="url(#inset-shadow-big-bottom)"
          rx="75" ry="105" />
    
    <circle cx="191" cy="191" r="155" fill="url(#LG2)"/>
    <circle cx="191" cy="191" r="130" fill="#53d2c5"/>
    <circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)" />
    
      <g width="200" height="200"
       transform="translate(100, 100)">
       <animateTransform attributeName="transform" type="translate" dur="4s" 
       values="191,191;191,191" repeatCount="indefinite"/>
       <animateTransform attributeName="transform" additive="sum" type="rotate" 
       dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
      
          <rect x="0" y="0"
                width="22" height="70" 
                fill="url(#arrow1)"
                fill-opacity="0.5"
                filter="url(#blurred-source)"
                rx="10" ry="10"
                transform="translate(-11, -15)" />
    </g>  
      
    <g width="200" height="200"
       transform="translate(100, 100)">
       <animateTransform attributeName="transform" type="translate" dur="4s" 
       values="191,191;191,191" repeatCount="indefinite"/>
       <animateTransform attributeName="transform" additive="sum" type="rotate" 
       dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>
      
          <rect x="0" y="0"
                width="20" height="70" 
                fill="url(#arrow1)"
                rx="10" ry="10"
                transform="translate(-10, -10)" />
    </g>
    
      <g width="200" height="200"
       transform="translate(100, 100)">
       <animateTransform attributeName="transform" type="translate" dur="4s" 
       values="191,191;191,191" repeatCount="indefinite"/>
       <animateTransform attributeName="transform" additive="sum" type="rotate" 
       dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
      
      <rect x="0" y="0"
            width="18" height="104" 
            fill="url(#arrow1)"
            fill-opacity="0.8"
            filter="url(#blurred-source)"
            rx="8" ry="8"
            transform="translate(-9, -15)"> />
    </g>   
      
    <g width="200" height="200"
       transform="translate(100, 100)">
       <animateTransform attributeName="transform" type="translate" dur="4s" 
       values="191,191;191,191" repeatCount="indefinite"/>
       <animateTransform attributeName="transform" additive="sum" type="rotate" 
       dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
      
      <rect x="0" y="0"
            width="16" height="104" 
            fill="url(#arrow1)"
            rx="8" ry="8"
            transform="translate(-8, -8)"> />
    </g>
    
     <g width="200" height="200">
       <animateTransform attributeName="transform" type="translate" dur="4s" 
       values="195,195;190,195" repeatCount="indefinite"/>
       <animateTransform attributeName="transform" additive="sum" type="rotate" 
       dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>
      
      <rect class="arrowRed"
            x="0" y="0"
            width="8" height="120" 
            fill="url(#arrowRed)"
            filter="url(#blurred-source)"
            fill-opacity="0.5"
            rx="3" ry="3"
            transform="translate(-3, -20)"/>
    </g>
      
    
    <g width="200" height="200"
       transform="translate(100, 100)">
       <animateTransform attributeName="transform" type="translate" dur="4s" 
       values="191,191;191,191" repeatCount="indefinite"/>
       <animateTransform attributeName="transform" additive="sum" type="rotate" 
       dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>
      
      <rect class="arrowRed"
            x="0" y="0"
            width="6" height="134" 
            fill="url(#arrowRed)"
            rx="3" ry="3"
            transform="translate(-3, -20)"/>
    </g>
      

    
        
    <g width="200" height="200"
       transform="translate(191, 191)">
      
      <circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"/>
      <circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"/>
    </g>
      
<!--      <path d="M 200 20 
                200 40 
                180 30 z">-->

      </g>
    </div>

css代码：

   .container
        {
            text-align: center;
            width: 100%;
            margin-top: 20px;
            padding: 20px;
        }

via:http://www.w2bc.com/Article/12747