今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：
实现的代码。
htm代码：
XML/HTML Code复制内容到剪贴板
<divclass="container"><svgwidth="600"height="600"class='svg-element'><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)"rx="8"ry="8"transform="translate(-9,-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="3600s"values="90,00;45000"repeatCount="indefinite"/><rectx="0"y="0"width="16"height="104"fill="url(#arrow1)"rx="8"ry="8"transform="translate(-8,-8)">/></g><gwidth="200"height="200"><animateTransformattributeName="transform"type="translate"dur="4s"values="195,195;190,195"repeatCount="indefinite"/><animateTransformattributeName="transform"additive="sum"type="rotate"dur="60s"values="0,00;36000"repeatCount="indefinite"/><rectclass="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><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="60s"values="0,00;36000"repeatCount="indefinite"/><rectclass="arrowRed"x="0"y="0"width="6"height="134"fill="url(#arrowRed)"rx="3"ry="3"transform="translate(-3,-20)"/></g><gwidth="200"height="200"transform="translate(191,191)"><circlecx="0"cy="0"r="19"fill="url(#center-knob-outter)"/><circlecx="0"cy="0"r="10"fill="url(#center-knob-inner)"/></g><!--<pathd="M200202004018030z">--></g></div> css3代码：
CSS Code复制内容到剪贴板
.container{text-align:center;width:100%;margin-top:20px;padding:20px;} 
