本地时间的Html5数字电子时钟特效代码
2015-04-20 10:20:21  By: shinyuu

• shinyuu
• HTML5开发
• 0
• 6704
• 0

纯html5绘制的本地时钟特效、效果非常好看、喜欢研究新技术的哥们可以看一下、没有一点js代码、只有控制margin的几行css而已、以下有图为证、它是一款非常漂亮html5时钟、整个界面都由html5绘制而成、效果特别不错、下载看看吧

部分HTML5代码

<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>

这里只贴出了部分代码、想要查看全部代码以及Demo运行效果的、请下载源代码吧、可直接运行的

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1bnFCfmB 密码: ihry

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛