文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用纯html5绘制时钟

2024-04-02 19:55

关注

这篇文章主要介绍如何使用纯html5绘制时钟,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一起看下效果图:

如何使用纯html5绘制时钟

  实现的代码。

  htm代码:

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

<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>

css3代码:

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

以上是“如何使用纯html5绘制时钟”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯