怎么用純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” />    

        </ feComponentTransfer >  

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

        </ feComponentTransfer >  

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

        </ feComponentTransfer >  

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

        </ feComponentTransfer >  

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

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

                    gradientTransform = “ rotate（90 .5 .5）” >         

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

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

    </ linearGradient >  

        < linearGradient id = “中央旋鈕內部”   

                    gradientTransform = “ rotate（90 .5 .5）” >         

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

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

    </ linearGradient >  

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

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

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

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

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

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

    < 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）” />      

    </ g >  

<！-       < path d =“ M 200 20     

                200 40    

                180 30 z“ > - >  

      </ g >  

    </ div >  

　　css3代碼：

CSS代碼將內容復制到文本

。容器   

        {   

            text-align ：  center ;   

            寬度：100％;   

            頁邊距：  20px ;   

            填充：  20px ;   

        }  

以上就是“怎么用純html5投射出一個非常漂亮的時鐘”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。