利用純html5繪制出來的一款非常漂亮的時鐘

2020-03-24 19:07:37

字體：大中小

來源：轉載

供稿：網友

今天給大家分享一款非常漂亮的純html5實現的時鐘。整個界面都由html5繪制而成。一起看下效果圖：實現的代碼。 htm代碼：XML/HTML Code復制內容到剪貼板
filterid= f4 x= -50% y= -20% width= 200% height= 140% feOffsetresult= offOut in= SourceAlpha dx= 0 dy= 25 / feGaussianBlurresult= blurOut in= offOut stdDeviation= 10 / feBlendin= SourceGraphic in2= blurOut mode= normal / /filter filterid= blurred-source x= -50% y= -20% width= 200% height= 140% feGaussianBlurin= color stdDeviation= 5 result= blurOut / /filter filterid= inset-shadow feOffsetdx= 0 dy= 10 / !--ShadowOffset-- feGaussianBlurstdDeviation= 15 result= offset-blur / !--ShadowBlur-- feCompositeoperator= out in= SourceGraphic in2= offset-blur result= inverse / !--Invertthedropshadowtocreateaninnershadow-- feFloodflood-color= black flood-opacity= 1 result= color / !--Color Opacity-- feCompositeoperator= in in= color in2= inverse result= shadow / !--Clipcolorinsideshadow-- feComponentTransferin= shadow result= shadow !--ShadowOpacity-- feFuncAtype= linear slope= 1 / /feComponentTransfer feCompositeoperator= over in= shadow in2= SourceGraphic / !--Putshadowoveroriginalobject-- /filter filterid= inset-shadow-big feOffsetdx= 0 dy= 4 / !--ShadowOffset-- feGaussianBlurstdDeviation= 2 result= offset-blur / !--ShadowBlur-- feCompositeoperator= out in= SourceGraphic in2= offset-blur result= inverse / !--Invertthedropshadowtocreateaninnershadow-- feFloodflood-color= white flood-opacity= 1 result= color / !--Color Opacity-- feCompositeoperator= in in= color in2= inverse result= shadow / !--Clipcolorinsideshadow-- feComponentTransferin= shadow result= shadow !--ShadowOpacity-- feFuncAtype= linear slope= 0.5 / /feComponentTransfer feCompositeoperator= over in= shadow in2= SourceGraphic / !--Putshadowoveroriginalobject-- /filter filterid= inset-shadow-big-bottom feOffsetdx= 0 dy= 10 / !--ShadowOffset-- feGaussianBlurstdDeviation= 2 result= offset-blur / !--ShadowBlur-- feCompositeoperator= out in= SourceGraphic in2= offset-blur result= inverse / !--Invertthedropshadowtocreateaninnershadow-- feFloodflood-color= #FFF flood-opacity= 1 result= color / !--Color Opacity-- feCompositeoperator= in in= color in2= inverse result= shadow / !--Clipcolorinsideshadow-- feComponentTransferin= shadow result= shadow !--ShadowOpacity-- feFuncAtype= linear slope= 0.5 / /feComponentTransfer feCompositeoperator= over in= shadow in2= SourceGraphic result='final-shadow-1'/ !--Putshadowoveroriginalobject-- feOffsetdx= 0 dy= -12 / !--ShadowOffset-- feGaussianBlurstdDeviation= 2 result= offset-blur / !--ShadowBlur-- feCompositeoperator= out in= final-shadow-1 in2= offset-blur result= inverse / !--Invertthedropshadowtocreateaninnershadow-- feFloodflood-color= #69c39b flood-opacity= 1 result= color / !--Color Opacity-- feCompositeoperator= in in= color in2= inverse result= shadow / !--Clipcolorinsideshadow-- feComponentTransferin= shadow result= shadow !--ShadowOpacity-- feFuncAtype= linear slope= 0.5 / /feComponentTransfer feCompositeoperator= over in= shadow in2= final-shadow-1 result='final-shadow-2'/ !--Putshadowoveroriginalobject-- /filter linearGradientid= LG gradientTransform= rotate(90.5.5) stopid= s0 offset= 0 stop-color= #d6f8e9 / stopid= s2 offset= 1 stop-color= #9ee1c4 / /linearGradient linearGradientid= LG2 gradientTransform= rotate(-90.5.5) stopid= s0 offset= 0.07 stop-color= #fdfefe / stopid= s1 offset= 0.5 stop-color= #98e2c2 / stopid= s2 offset= 0.8 stop-color= #79c9a7 / stopid= s3 offset= 1 stop-color= #5fbc95 / /linearGradient linearGradientid= arrow1 gradientTransform= rotate(-90.5.5) stopid= s0 offset= 0 stop-color= #07594f / stopid= s2 offset= 1 stop-color= #01443c / /linearGradient linearGradientid= arrowRed gradientTransform= rotate(-90.5.5) stopid= s0 offset= 0 stop-color= #fd5959 / stopid= s2 offset= 1 stop-color= #fe7c7c / /linearGradient linearGradientid= center-knob-outter gradientTransform= rotate(90.5.5) stopid= s0 offset= 0 stop-color= #fffefe / stopid= s2 offset= 1 stop-color= #86ecdb / /linearGradient linearGradientid= center-knob-inner gradientTransform= rotate(90.5.5) stopid= s0 offset= 0 stop-color= #a0dcd2 / stopid= s2 offset= 1 stop-color= #dff9ef / /linearGradient gtransform= translate(50,20) rectx= 0 y= 0 width= 382 height= 382 fill= url(#LG) filter= url(#inset-shadow-big-bottom) rx= 75 ry= 105 / circlecx= 191 cy= 191 r= 155 fill= url(#LG2) / circlecx= 191 cy= 191 r= 130 fill= #53d2c5 / circlecx= 191 cy= 191 r= 130 fill= #53d2c5 filter= url(#inset-shadow) / gwidth= 200 height= 200 transform= translate(100,100) animateTransformattributeName= transform type= translate dur= 4s values= 191,191;191,191 repeatCount= indefinite / animateTransformattributeName= transform additive= sum type= rotate dur= 86400s values= 200,00;55000 repeatCount= indefinite / rectx= 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 gwidth= 200 height= 200 transform= translate(100,100) animateTransformattributeName= transform type= translate dur= 4s values= 191,191;191,191 repeatCount= indefinite / animateTransformattributeName= transform additive= sum type= rotate dur= 86400s values= 200,00;55000 repeatCount= indefinite / rectx= 0 y= 0 width= 20 height= 70 fill= url(#arrow1) rx= 10 ry= 10 transform= translate(-10,-10) / /g gwidth= 200 height= 200 transform= translate(100,100) animateTransformattributeName= transform type= translate dur= 4s values= 191,191;191,191 repeatCount= indefinite / animateTransformattributeName= transform additive= sum type= rotate dur= 3600s values= 90,00;45000 repeatCount= indefinite / rectx= 0 y= 0 width= 18 height= 104 fill= url(#arrow1) fill-opacity= 0.8 filter= url(#blurred-source)html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：總結類html標題，段落，換行，水平線，特殊字符

下一篇：怎樣用HTML實現滾動彈幕功能