怎么用纯html5投射出一个非常漂亮的时钟

今天小编给大家分享一下怎么用纯html5投射出一个非常漂亮的时钟的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册网站空间、营销软件、网站建设、珠海网站维护、网站推广。

实现的代码。

htm代码:

XML / HTML代码将内容复制到文本

< div class = “容器” >   

        < svg宽度= “ 600”高度= “ 600”类= 'svg-元素' >     

    <过滤器ID = “ f4” x = “ -50%” y = “ -20%”宽度= “ 200%”高度= “ 140%” >       

      < feOffset结果= “ offOut” in = “ SourceAlpha” dx = “ 0” dy = “ 25” />       

      < feGaussianBlur结果= “ blurOut” in = “ offOut” stdDeviation = “ 10” />      

      < feBlend in = “ SourceGraphic” in2 = “ blurOut”模式= “正常” />      

      

  <过滤器ID = “模糊源” x = “ -50%” y = “ -20%”宽度= “ 200%”高度= “ 140%” >       

    < feGaussianBlur in = “ color” stdDeviation = “ 5”结果= “ blurOut” />     

    

    <过滤器ID = “插入阴影” >   

        < feOffset dx = “ 0” dy = “ 10” /> <!-阴影偏移->                                                             

        < feGaussianBlur stdDeviation = “ 15”结果= “ offset-blur” /> <!-阴影模糊->                                

        < feComposite运算符= “ out” in = “ SourceGraphic” in2 = “ offset-blur”结果= “ inverse” /> <!-反转投影阴影以创建内部阴影->       

        < feFlood Flood-color = “黑色” Flood-opacity = “ 1”结果= “ color” /> <!-颜色和不透明度->                          

        < feComposite运算符= “ in” in = “颜色” in2 = “反” result = “阴影” /> <!-阴影内的剪辑颜色->                     

        < feComponentTransfer in = “阴影”结果= “阴影” > <!-阴影不透明度->                                       

            < feFuncA类型= “线性”斜率= “ 1” />    

          

        < feComposite运算符= “ over” in = “阴影” in2 = “ SourceGraphic” /> <!-在原始对象上放置阴影->                         

      

    <过滤器ID = “插入阴影大” >   

        < feOffset dx = “ 0” dy = “ 4” /> <!-阴影偏移->                                                             

        < feGaussianBlur stdDeviation = “ 2”结果= “ offset-blur” /> <!-阴影模糊->                                

        < feComposite运算符= “ out” in = “ SourceGraphic” in2 = “ offset-blur”结果= “ inverse” /> <!-反转投影阴影以创建内部阴影->       

        < feFlood Flood-color = “白色” Flood-opacity = “ 1”结果= “ color” /> <!-颜色和不透明度->                          

        < feComposite运算符= “ in” in = “颜色” in2 = “反” result = “阴影” /> <!-阴影内的剪辑颜色->                     

        < feComponentTransfer in = “阴影”结果= “阴影” > <!-阴影不透明度->                                       

            < feFuncA类型= “线性”斜率= “ 0.5” />    

          

        < feComposite运算符= “ over” in = “阴影” in2 = “ SourceGraphic” /> <!-在原始对象上放置阴影->                         

      

    <过滤器ID = “插入阴影大底部” >   

        < feOffset dx = “ 0” dy = “ 10” /> <!-阴影偏移->                                                             

        < feGaussianBlur stdDeviation = “ 2”结果= “ offset-blur” /> <!-阴影模糊->                                

        < feComposite运算符= “ out” in = “ SourceGraphic” in2 = “ offset-blur”结果= “ inverse” /> <!-反转投影阴影以创建内部阴影->       

        < feFlood Flood-color = “ #FFF” Flood-opacity = “ 1”结果= “ color” /> <!-颜色和不透明度->                          

        < feComposite运算符= “ in” in = “颜色” in2 = “反” result = “阴影” /> <!-阴影内的剪辑颜色->                     

        < feComponentTransfer in = “阴影”结果= “阴影” > <!-阴影不透明度->                                       

            < feFuncA类型= “线性”斜率= “ 0.5” />    

          

        < feComposite运算符= “ over” in = “阴影” in2 = “ SourceGraphic”结果= 'final-shadow-1' /> <!-将阴影放在原始对象上->                          

        < feOffset dx = “ 0” dy = “ -12” /> <!-阴影偏移->                                                             

        < feGaussianBlur stdDeviation = “ 2”结果= “ offset-blur” /> <!-阴影模糊->                                

        < feComposite运算符= “ out” in = “最终阴影-1” in2 = “偏移模糊” result = “ inverse” /> <!-反转投影阴影以创建内部阴影->       

        < feFlood Flood-color = “#69c39b” Flood-opacity = “ 1”结果= “ color” /> <!-颜色和不透明度->                          

        < feComposite运算符= “ in” in = “颜色” in2 = “反” result = “阴影” /> <!-阴影内的剪辑颜色->                     

        < feComponentTransfer in = “阴影”结果= “阴影” > <!-阴影不透明度->                                       

            < feFuncA类型= “线性”斜率= “ 0.5” />    

          

        < feComposite运算符= “ over” in = “阴影” in2 = “最终阴影1”结果= '最终阴影2' /> <!-将阴影放在原始对象上->                          

      

    < 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 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 id = “ arrow1”   

                    gradientTransform = “ rotate(-90 .5 .5)” >         

      < stop id = “ s0” offset = “ 0” stop-color = “#07594f” />     

      < stop id = “ s2” offset = “ 1” stop-color = “#01443c” />     

      

    < 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 id = “中央旋钮外框”   

                    gradientTransform = “ rotate(90 .5 .5)” >         

      < stop id = “ s0” offset = “ 0” stop-color = “ #fffefe” />     

      < stop id = “ s2” offset = “ 1” stop-color = “#86ecdb” />     

      

        < linearGradient id = “中央旋钮内部”   

                    gradientTransform = “ rotate(90 .5 .5)” >         

      < stop id = “ s0”偏移= “ 0” stop-color = “#a0dcd2” />     

      < stop id = “ s2” offset = “ 1” stop-color = “#dff9ef” />     

      

    < g transform = “ translate(50,20)” >   

      < rect x = “ 0” y = “ 0”    

          宽度= “ 382”高度= “ 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宽度= “ 200”高度= “ 200”    

       transform = “ translate(100,100)” >  

       < animateTransform attributeName = “ transform”类型= “ translate” dur = “ 4s”       

       值= “ 191,191; 191,191” repeatCount = “不确定” />   

       < animateTransform attributeName = “ transform”加成= “ sum”类型= “ rotate”       

       DUR = “86400秒”的值= “200,0 0 550 0 0” repeatCount = “不确定” />    

          < rect x = “ 0” y = “ 0”    

                宽度= “ 22”高度= “ 70”     

                fill = “ url(#arrow1)”  

                填充不透明度= “ 0.5”  

                filter = “ url(#blurred-source)”  

                rx = “ 10” ry = “ 10”   

                transform = “ translate(-11,-15)” />   

         

    < g宽度= “ 200”高度= “ 200”    

       transform = “ translate(100,100)” >  

       < animateTransform attributeName = “ transform”类型= “ translate” dur = “ 4s”       

       值= “ 191,191; 191,191” repeatCount = “不确定” />   

       < animateTransform attributeName = “ transform”加成= “ sum”类型= “ rotate”       

       DUR = “86400秒”的值= “200,0 0 550 0 0” repeatCount = “不确定” />    

          < rect x = “ 0” y = “ 0”    

                宽度= “ 20”高度= “ 70”     

                fill = “ url(#arrow1)”  

                rx = “ 10” ry = “ 10”   

                transform = “ translate(-10,-10)” />   

      

      < g宽度= “ 200”高度= “ 200”    

       transform = “ translate(100,100)” >  

       < animateTransform attributeName = “ transform”类型= “ translate” dur = “ 4s”       

       值= “ 191,191; 191,191” repeatCount = “不确定” />   

       < animateTransform attributeName = “ transform”加成= “ sum”类型= “ rotate”       

       dur = “ 3600s”值= “ 90,0 0; 450 0 0” repeatCount = “不确定” />    

      < rect x = “ 0” y = “ 0”    

            宽度= “ 18”高度= “ 104”     

            fill = “ url(#arrow1)”  

            填充不透明度= “ 0.8”  

            filter = “ url(#blurred-source)”  

            rx = “ 8” ry = “ 8”   

            transform = “ translate(-9,-15)” > />   

          

    < g宽度= “ 200”高度= “ 200”    

       transform = “ translate(100,100)” >  

       < animateTransform attributeName = “ transform”类型= “ translate” dur = “ 4s”       

       值= “ 191,191; 191,191” repeatCount = “不确定” />   

       < animateTransform attributeName = “ transform”加成= “ sum”类型= “ rotate”       

       dur = “ 3600s”值= “ 90,0 0; 450 0 0” repeatCount = “不确定” />    

      < rect x = “ 0” y = “ 0”    

            宽度= “ 16”高度= “ 104”     

            fill = “ url(#arrow1)”  

            rx = “ 8” ry = “ 8”   

            transform = “ translate(-8,-8)” > />   

      

     < g宽度= “ 200”高度= “ 200” >    

       < animateTransform attributeName = “ transform”类型= “ translate” dur = “ 4s”       

       值= “ 195,195; 190,195” repeatCount = “不确定” />   

       < animateTransform attributeName = “ transform”加成= “ sum”类型= “ rotate”       

       dur = “ 60s”值= “ 0,0 0; 360 0 0” repeatCount = “不确定” />    

      < rect class = “ arrowRed”   

            x = “ 0” y = “ 0”   

            宽度= “ 8”高度= “ 120”     

            fill = “ url(#arrowRed)”  

            filter = “ url(#blurred-source)”  

            填充不透明度= “ 0.5”  

            rx = “ 3” ry = “ 3”   

            transform = “ translate(-3,-20)” />  

      

    < g宽度= “ 200”高度= “ 200”    

       transform = “ translate(100,100)” >  

       < animateTransform attributeName = “ transform”类型= “ translate” dur = “ 4s”       

       值= “ 191,191; 191,191” repeatCount = “不确定” />   

       < animateTransform attributeName = “ transform”加成= “ sum”类型= “ rotate”       

       dur = “ 60s”值= “ 0,0 0; 360 0 0” repeatCount = “不确定” />    

      < rect class = “ arrowRed”   

            x = “ 0” y = “ 0”   

            宽度= “ 6”高度= “ 134”     

            fill = “ url(#arrowRed)”  

            rx = “ 3” ry = “ 3”   

            transform = “ translate(-3,-20)” />  

      

    < g宽度= “ 200”高度= “ 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)” />      

      

<!-       < path d =“ M 200 20     

                200 40    

                180 30 z“ > - >  

        

      

css3代码:

CSS代码将内容复制到文本

。容器   

        {   

            text-align :  center ;   

            宽度:100%;   

            页边距:  20px ;   

            填充:  20px ;   

        }  

以上就是“怎么用纯html5投射出一个非常漂亮的时钟”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


当前名称:怎么用纯html5投射出一个非常漂亮的时钟
文章路径:http://scyanting.com/article/ihddcs.html