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

少了你的风景，我没有美丽的人生。天气真好!一起去郊游吧，拥抱大自然，呼吸清新的空气，享受悠闲和温馨。

　　今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：

　　实现的代码。

　　htm代码：

XML/HTML Code复制内容到剪贴板

<divclass="container">
<svgwidth="600"height="600"class='svg-element'>
<filterid="f4"x="-50%"y="-20%"width="200%"height="140%">
<feOffsetresult="offOut"in="SourceAlpha"dx="0"dy="25"/>
<feGaussianBlurresult="blurOut"in="offOut"stdDeviation="10"/>
<feBlendin="SourceGraphic"in2="blurOut"mode="normal"/>
</filter>
<filterid="blurred-source"x="-50%"y="-20%"width="200%"height="140%">
<feGaussianBlurin="color"stdDeviation="5"result="blurOut"/>
</filter>
<filterid="inset-shadow">
<feOffsetdx="0"dy="10"/>
<feGaussianBlurstdDeviation="15"result="offset-blur"/>
<feCompositeoperator="out"in="SourceGraphic"in2="offset-blur"result="inverse"/>
<feFloodflood-color="black"flood-opacity="1"result="color"/>
<feCompositeoperator="in"in="color"in2="inverse"result="shadow"/>
<feComponentTransferin="shadow"result="shadow">
<feFuncAtype="linear"slope="1"/>
</feComponentTransfer>
<feCompositeoperator="over"in="shadow"in2="SourceGraphic"/>
</filter>
<filterid="inset-shadow-big">
<feOffsetdx="0"dy="4"/>
<feGaussianBlurstdDeviation="2"result="offset-blur"/>
<feCompositeoperator="out"in="SourceGraphic"in2="offset-blur"result="inverse"/>
<feFloodflood-color="white"flood-opacity="1"result="color"/>
<feCompositeoperator="in"in="color"in2="inverse"result="shadow"/>
<feComponentTransferin="shadow"result="shadow">
<feFuncAtype="linear"slope="0.5"/>
</feComponentTransfer>
<feCompositeoperator="over"in="shadow"in2="SourceGraphic"/>
</filter>
<filterid="inset-shadow-big-bottom">
<feOffsetdx="0"dy="10"/>
<feGaussianBlurstdDeviation="2"result="offset-blur"/>
<feCompositeoperator="out"in="SourceGraphic"in2="offset-blur"result="inverse"/>
<feFloodflood-color="#FFF"flood-opacity="1"result="color"/>
<feCompositeoperator="in"in="color"in2="inverse"result="shadow"/>
<feComponentTransferin="shadow"result="shadow">
<feFuncAtype="linear"slope="0.5"/>
</feComponentTransfer>
<feCompositeoperator="over"in="shadow"in2="SourceGraphic"result='final-shadow-1'/>
<feOffsetdx="0"dy="-12"/>
<feGaussianBlurstdDeviation="2"result="offset-blur"/>
<feCompositeoperator="out"in="final-shadow-1"in2="offset-blur"result="inverse"/>
<feFloodflood-color="#69c39b"flood-opacity="1"result="color"/>
<feCompositeoperator="in"in="color"in2="inverse"result="shadow"/>
<feComponentTransferin="shadow"result="shadow">
<feFuncAtype="linear"slope="0.5"/>
</feComponentTransfer>
<feCompositeoperator="over"in="shadow"in2="final-shadow-1"result='final-shadow-2'/>
</filter>
<linearGradientid="LG"
gradientTransform="rotate(90.5.5)">
<stopid="s0"offset="0"stop-color="#d6f8e9"/>
<stopid="s2"offset="1"stop-color="#9ee1c4"/>
</linearGradient>
<linearGradientid="LG2"
gradientTransform="rotate(-90.5.5)">
<stopid="s0"offset="0.07"stop-color="#fdfefe"/>
<stopid="s1"offset="0.5"stop-color="#98e2c2"/>
<stopid="s2"offset="0.8"stop-color="#79c9a7"/>
<stopid="s3"offset="1"stop-color="#5fbc95"/>
</linearGradient>
<linearGradientid="arrow1"
gradientTransform="rotate(-90.5.5)">
<stopid="s0"offset="0"stop-color="#07594f"/>
<stopid="s2"offset="1"stop-color="#01443c"/>
</linearGradient>
<linearGradientid="arrowRed"
gradientTransform="rotate(-90.5.5)">
<stopid="s0"offset="0"stop-color="#fd5959"/>
<stopid="s2"offset="1"stop-color="#fe7c7c"/>
</linearGradient>
<linearGradientid="center-knob-outter"
gradientTransform="rotate(90.5.5)">
<stopid="s0"offset="0"stop-color="#fffefe"/>
<stopid="s2"offset="1"stop-color="#86ecdb"/>
</linearGradient>
<linearGradientid="center-knob-inner"
gradientTransform="rotate(90.5.5)">
<stopid="s0"offset="0"stop-color="#a0dcd2"/>
<stopid="s2"offset="1"stop-color="#dff9ef"/>
</linearGradient>
<gtransform="translate(50,20)">
<rectx="0"y="0"
width="382"height="382"
fill="url(#LG)"
filter="url(#inset-shadow-big-bottom)"
rx="75"ry="105"/>
<circlecx="191"cy="191"r="155"fill="url(#LG2)"/>
<circlecx="191"cy="191"r="130"fill="#53d2c5"/>
<circlecx="191"cy="191"r="130"fill="#53d2c5"filter="url(#inset-shadow)"/>
<gwidth="200"height="200"
transform="translate(100,100)">
<animateTransformattributeName="transform"type="translate"dur="4s"
values="191,191;191,191"repeatCount="indefinite"/>
<animateTransformattributeName="transform"additive="sum"type="rotate"
dur="86400s"values="200,00;55000"repeatCount="indefinite"/>
<rectx="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>
<gwidth="200"height="200"
transform="translate(100,100)">
<animateTransformattributeName="transform"type="translate"dur="4s"
values="191,191;191,191"repeatCount="indefinite"/>
<animateTransformattributeName="transform"additive="sum"type="rotate"
dur="86400s"values="200,00;55000"repeatCount="indefinite"/>
<rectx="0"y="0"
width="20"height="70"
fill="url(#arrow1)"
rx="10"ry="10"
transform="translate(-10,-10)"/>
</g>
<gwidth="200"height="200"
transform="translate(100,100)">
<animateTransformattributeName="transform"type="translate"dur="4s"
values="191,191;191,191"repeatCount="indefinite"/>
<animateTransformattributeName="transform"additive="sum"type="rotate"
dur="3600s"values="90,00;45000"repeatCount="indefinite"/>
<rectx="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>
<gwidth="200"height="200"
transform="translate(100,100)">
<animateTransformattributeName="transform"type="translate"dur="4s"
values="191,191;191,191"repeatCount="indefinite"/>
<animateTransformattributeName="transform"additive="sum"type="rotate"
dur="3600s"values="90,00;45000"repeatCount="indefinite"/>
<rectx="0"y="0"
width="16"height="104"
fill="url(#arrow1)"
rx="8"ry="8"
transform="translate(-8,-8)">/>
</g>
<gwidth="200"height="200">
<animateTransformattributeName="transform"type="translate"dur="4s"
values="195,195;190,195"repeatCount="indefinite"/>
<animateTransformattributeName="transform"additive="sum"type="rotate"
dur="60s"values="0,00;36000"repeatCount="indefinite"/>
<rectclass="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>
<gwidth="200"height="200"
transform="translate(100,100)">
<animateTransformattributeName="transform"type="translate"dur="4s"
values="191,191;191,191"repeatCount="indefinite"/>
<animateTransformattributeName="transform"additive="sum"type="rotate"
dur="60s"values="0,00;36000"repeatCount="indefinite"/>
<rectclass="arrowRed"
x="0"y="0"
width="6"height="134"
fill="url(#arrowRed)"
rx="3"ry="3"
transform="translate(-3,-20)"/>
</g>
<gwidth="200"height="200"
transform="translate(191,191)">
<circlecx="0"cy="0"r="19"fill="url(#center-knob-outter)"/>
<circlecx="0"cy="0"r="10"fill="url(#center-knob-inner)"/>
</g>
<!--<pathd="M20020
20040
18030z">-->
</g>
</div>

　　css3代码：

CSS Code复制内容到剪贴板

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

本文如何利用纯html5绘制出来的一款非常漂亮的时钟到此结束。快乐的人不是没有痛苦，而是不会被痛苦所左右。人生难免会和痛苦不期而遇，其实痛苦并不可怕，可怕的是内心背叛自己。整理一下自己的心情，忘记那些不愉快的往事，听听音乐，弹弹钢琴，看看风景，说能说的话，做个单纯的人，走幸福的路。带上微笑，和快乐一起出发吧。小编再次感谢大家对我们的支持！

全站频道

大家都在搜索：