分享一个纯html5制作的时钟源码实例
作者：袖梨
2022-06-25
今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：
实现的代码。
html代码：
| 代码如下 | 复制代码 |
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)"> |
|
css代码：
| 代码如下 | 复制代码 |
| .container { text-align: center; width: 100%; margin-top: 20px; padding: 20px; } |
|
