分享一个纯html5制作的时钟源码实例

gradientTransform="rotate(90 .5 .5)">




gradientTransform="rotate(-90 .5 .5)">






gradientTransform="rotate(-90 .5 .5)">




gradientTransform="rotate(-90 .5 .5)">




gradientTransform="rotate(90 .5 .5)">




gradientTransform="rotate(90 .5 .5)">






width="382" height="382"
fill="url(#LG)"
filter="url(#inset-shadow-big-bottom)"
rx="75" ry="105" />





transform="translate(100, 100)">
values="191,191;191,191" repeatCount="indefinite"/>
dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>

width="22" height="70"
fill="url(#arrow1)"
fill-opacity="0.5"
filter="url(#blurred-source)"
rx="10" ry="10"
transform="translate(-11, -15)" />


transform="translate(100, 100)">
values="191,191;191,191" repeatCount="indefinite"/>
dur="86400s" values="200, 0 0;550 0 0" repeatCount="indefinite"/>

width="20" height="70"
fill="url(#arrow1)"
rx="10" ry="10"
transform="translate(-10, -10)" />


transform="translate(100, 100)">
values="191,191;191,191" repeatCount="indefinite"/>
dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>

width="18" height="104"
fill="url(#arrow1)"
fill-opacity="0.8"
filter="url(#blurred-source)"
rx="8" ry="8"
transform="translate(-9, -15)"> />


transform="translate(100, 100)">
values="191,191;191,191" repeatCount="indefinite"/>
dur="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>

width="16" height="104"
fill="url(#arrow1)"
rx="8" ry="8"
transform="translate(-8, -8)"> />



values="195,195;190,195" repeatCount="indefinite"/>
dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>

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)"/>



transform="translate(100, 100)">
values="191,191;191,191" repeatCount="indefinite"/>
dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>

x="0" y="0"
width="6" height="134"
fill="url(#arrowRed)"
rx="3" ry="3"
transform="translate(-3, -20)"/>




transform="translate(191, 191)">