利用纯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实现滚动弹幕功能