利用纯html5绘制出来的一款非常漂亮的时钟

网页制作 2024/11/16 佚名

3 2 1

　　今天给大家分享一款非常漂亮的纯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)"
rx="8" ry="8"
transform="translate(-9, -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="3600s" values="90,0 0;450 0 0" repeatCount="indefinite"/>
<rect x="0" y="0"
width="16" height="104"
fill="url(#arrow1)"
rx="8" ry="8"
transform="translate(-8, -8)"> />
</g>
<g width="200" height="200">
<animateTransform attributeName="transform" type="translate" dur="4s"
values="195,195;190,195" repeatCount="indefinite"/>
<animateTransform attributeName="transform" additive="sum" type="rotate"
dur="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>
<rect class="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>
<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="60s" values="0,0 0;360 0 0" repeatCount="indefinite"/>
<rect class="arrowRed"
x="0" y="0"
width="6" height="134"
fill="url(#arrowRed)"
rx="3" ry="3"
transform="translate(-3, -20)"/>
</g>
<g width="200" height="200"
transform="translate(191, 191)">
<circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"/>
<circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"/>
</g>
<!-- <path d="M 200 20
200 40
180 30 z">-->
</g>
</div>

　　css3代码：

CSS Code复制内容到剪贴板

.container
{
text-align: center;
width: 100%;
margin-top: 20px;
padding: 20px;
}

html5时钟

标签：

html5时钟

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“利用纯html5绘制出来的一款非常漂亮的时钟”

利用纯html5绘制出来的一款非常漂亮的时钟

暂无“利用纯html5绘制出来的一款非常漂亮的时钟”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

利用纯html5绘制出来的一款非常漂亮的时钟

html5时钟

HTML5学习笔记之History API

HTML5 Canvas绘制圆点虚线实例

评论“利用纯html5绘制出来的一款非常漂亮的时钟”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

利用纯html5绘制出来的一款非常漂亮的时钟

html5时钟

HTML5学习笔记之History API

HTML5 Canvas绘制圆点虚线实例

评论“利用纯html5绘制出来的一款非常漂亮的时钟”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存