百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 分享一个纯html5制作的时钟源码实例
分享本文到:

分享一个纯html5制作的时钟源码实例

发布时间:01/15 来源: 浏览: 关键词:
学习html5有一段时间了,今天想着就用html5制作了一个时钟,效果如下面图片,想着有点成就感,分享出来给大家参考,不到之处请指点。

今天给大家分享一款非常漂亮的纯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
40
30 z">-->

  </g>
</div>

css代码:

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

 

责任编辑:
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有37人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

订阅获得更多模板