今天给大家分享一款非常漂亮的纯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"/><> <feGaussianBlurstdDeviation="15"result="offset-blur"/><> <feCompositeoperator="out"in="SourceGraphic"in2="offset-blur"result="inverse"/><> <feFloodflood-color="black"flood-opacity="1"result="color"/><> <feCompositeoperator="in"in="color"in2="inverse"result="shadow"/><> <feComponentTransferin="shadow"result="shadow"><> <feFuncAtype="linear"slope="1"/> </feComponentTransfer> <feCompositeoperator="over"in="shadow"in2="SourceGraphic"/><> </filter> <filterid="inset-shadow-big"> <feOffsetdx="0"dy="4"/><> <feGaussianBlurstdDeviation="2"result="offset-blur"/><> <feCompositeoperator="out"in="SourceGraphic"in2="offset-blur"result="inverse"/><> <feFloodflood-color="white"flood-opacity="1"result="color"/><> <feCompositeoperator="in"in="color"in2="inverse"result="shadow"/><> <feComponentTransferin="shadow"result="shadow"><> <feFuncAtype="linear"slope="0.5"/> </feComponentTransfer> <feCompositeoperator="over"in="shadow"in2="SourceGraphic"/><> </filter> <filterid="inset-shadow-big-bottom"> <feOffsetdx="0"dy="10"/><> <feGaussianBlurstdDeviation="2"result="offset-blur"/><> <feCompositeoperator="out"in="SourceGraphic"in2="offset-blur"result="inverse"/><> <feFloodflood-color="#FFF"flood-opacity="1"result="color"/><> <feCompositeoperator="in"in="color"in2="inverse"result="shadow"/><> <feComponentTransferin="shadow"result="shadow"><> <feFuncAtype="linear"slope="0.5"/> </feComponentTransfer> <feCompositeoperator="over"in="shadow"in2="SourceGraphic"result='final-shadow-1'/><> <feOffsetdx="0"dy="-12"/><> <feGaussianBlurstdDeviation="2"result="offset-blur"/><> <feCompositeoperator="out"in="final-shadow-1"in2="offset-blur"result="inverse"/><> <feFloodflood-color="#69c39b"flood-opacity="1"result="color"/><> <feCompositeoperator="in"in="color"in2="inverse"result="shadow"/><> <feComponentTransferin="shadow"result="shadow"><> <feFuncAtype="linear"slope="0.5"/> </feComponentTransfer> <feCompositeoperator="over"in="shadow"in2="final-shadow-1"result='final-shadow-2'/><> </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="M20020 20040 18030z">--> </g> </div>
css3代码：
CSS Code复制内容到剪贴板 .container { text-align:center; width:100%; margin-top:20px; padding:20px; }
【利用纯html5绘制出来的一款非常漂亮的时钟】相关文章：
★ 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
★ 让IE下支持Html5的placeholder属性的插件
★ 利用简洁的图片预加载组件提升html5移动页面的用户体验