今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：
实现的代码。
htm代码：
XML/HTML Code复制内容到剪贴板div class=”container”> svg width=”600″ height=”600″ class=’svg-element’> filter id=”f4″ x=”-50%” y=”-20%” width=”200%” height=”140%”> feOffset result=”offOut” in=”SourceAlpha” dx=”0″ dy=”25″ /> feGaussianBlur result=”blurOut” in=”offOut” stdDeviation=”10″ /> feBlend in=”SourceGraphic” in2=”blurOut” mode=”normal” /> filter> filter id=”blurred-source” x=”-50%” y=”-20%” width=”200%” height=”140%”> feGaussianBlur in=”color” stdDeviation=”5″ result=”blurOut”/> filter> filter id=”inset-shadow”> feOffset dx=”0″ dy=”10″/> feGaussianBlur stdDeviation=”15″ result=”offset-blur”/> feComposite operator=”out” in=”SourceGraphic” in2=”offset-blur” result=”inverse”/> feFlood flood-color=”black” flood-opacity=”1″ result=”color”/> feComposite operator=”in” in=”color” in2=”inverse” result=”shadow”/> feComponentTransfer in=”shadow” result=”shadow”> feFuncA type=”linear” slope=”1″/> feComponentTransfer> feComposite operator=”over” in=”shadow” in2=”SourceGraphic”/> filter> filter id=”inset-shadow-big”> feOffset dx=”0″ dy=”4″/> feGaussianBlur stdDeviation=”2″ result=”offset-blur”/> feComposite operator=”out” in=”SourceGraphic” in2=”offset-blur” result=”inverse”/> feFlood flood-color=”white” flood-opacity=”1″ result=”color”/> feComposite operator=”in” in=”color” in2=”inverse” result=”shadow”/> feComponentTransfer in=”shadow” result=”shadow”> feFuncA type=”linear” slope=”0.5″/> feComponentTransfer> feComposite operator=”over” in=”shadow” in2=”SourceGraphic”/> filter> filter id=”inset-shadow-big-bottom”> feOffset dx=”0″ dy=”10″/> feGaussianBlur stdDeviation=”2″ result=”offset-blur”/> feComposite operator=”out” in=”SourceGraphic” in2=”offset-blur” result=”inverse”/> feFlood flood-color=”#FFF” flood-opacity=”1″ result=”color”/> feComposite operator=”in” in=”color” in2=”inverse” result=”shadow”/> feComponentTransfer in=”shadow” result=”shadow”> feFuncA type=”linear” slope=”0.5″/> feComponentTransfer> feComposite operator=”over” in=”shadow” in2=”SourceGraphic” result=’final-shadow-1’/> feOffset dx=”0″ dy=”-12″/> feGaussianBlur stdDeviation=”2″ result=”offset-blur”/> feComposite operator=”out” in=”final-shadow-1″ in2=”offset-blur” result=”inverse”/> feFlood flood-color=”#69c39b” flood-opacity=”1″ result=”color”/> feComposite operator=”in” in=”color” in2=”inverse” result=”shadow”/> feComponentTransfer in=”shadow” result=”shadow”> feFuncA type=”linear” slope=”0.5″/> feComponentTransfer> feComposite operator=”over” in=”shadow” in2=”final-shadow-1″ result=’final-shadow-2’/> filter> 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=”center-knob-outter” gradientTransform=”rotate(90 .5 .5)”> stop id=”s0″ offset=”0″ stop-color=”#fffefe”/> stop id=”s2″ offset=”1″ stop-color=”#86ecdb”/> linearGradient> linearGradient id=”center-knob-inner” gradientTransform=”rotate(90 .5 .5)”> stop id=”s0″ offset=”0″ stop-color=”#a0dcd2″/> stop id=”s2″ offset=”1″ stop-color=”#dff9ef”/> linearGradient> g transform=”translate(50, 20)”> rect x=”0″ y=”0″ width=”382″ height=”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 width=”200″ height=”200″ transform=”translate(100, 100)”> animateTransform attributeName=”transform” type=”translate” dur=”4s” values=”191,191;191,191″ repeatCount=”indefinite”/> animateTransform attributeName=”transform” additive=”sum” type=”rotate” dur=”86400s” values=”200, 0 0;550 0 0″ repeatCount=”indefinite”/> rect x=”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> g width=”200″ height=”200″ transform=”translate(100, 100)”> animateTransform attributeName=”transform” type=”translate” dur=”4s” values=”191,191;191,191″ repeatCount=”indefinite”/> animateTransform attributeName=”transform” additive=”sum” type=”rotate” dur=”86400s” values=”200, 0 0;550 0 0″ repeatCount=”indefinite”/> rect x=”0″ y=”0″ width=”20″ height=”70″ fill=”url(#arrow1)” rx=”10″ ry=”10″ transform=”translate(-10, -10)” /> g> g width=”200″ height=”200″ transform=”translate(100, 100)”> animateTransform attributeName=”transform” type=”translate” dur=”4s” values=”191,191;191,191″ repeatCount=”indefinite”/> animateTransform attributeName=”transform” additive=”sum” type=”rotate” dur=”3600s” values=”90,0 0;450 0 0″ repeatCount=”indefinite”/> rect x=”0″ y=”0″ width=”18″ height=”104″ fill=”url(#arrow1)” fill-opacity=”0.8″ filter=”url(#blurred-source)”
