今天给大家分享一款非常漂亮的纯ht ML 5实现的时钟。整个界面都由html5 绘制 而成。一起看下效果图：
实现的代码。
htm代码：
XM L/HTML Code 复制内容到剪贴板
< div &nbs p; class = "cont ai ner" > < svg width = "600" h ei ght = "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 = "blur red -s ource" 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" /> <!-- Shadow Offset --> < feGaussianBlur stdDeviation = "15" result = "offset-blur" /> <!-- Shadow Blur --> < feCompos IT e opera tor = "out" in = "SourceGraphic" in2 = "offset-blur" result = "inverse" /> <!-- Invert the drop shadow to create an inner shadow --> < feFlood flood-color = "black" flood-opacity = "1" result = "color" /> <!-- Color & am p; Opacity --> < feComposite o PE rator = "in" in = "color" in2 = "inverse" result = "shadow" /> <!-- Clip color inside shadow --> < fe component transfer in = "shadow" result = "shadow" > <!-- Shadow Opacity --> < feFuncA type = "linear" slope = "1" /> </ feComponentTransfer > < feComposite operator = "over" in = "shadow" in2 = "SourceGraphic" /> <!-- Put shadow over ori gin al object --> </ filter > < filter id = "inset-shadow- Big " > < feOffset dx = "0" dy = "4" /> <!-- Shadow Offset --> < feGaussianBlur stdDeviation = "2" result = "offset-blur" /> <!-- Shadow Blur --> < feComposite operator = "out" in = "SourceGraphic" in2 = "offset-blur" result = "inverse" /> <!-- Invert the drop shadow to create an inner shadow --> < feFlood flood-color = "white" flood-opacity = "1" result = "color" /> <!-- Color & Opacity --> < feComposite operator = "in" in = "color" in2 = "inverse" result = "shadow" /> <!-- Clip color inside shadow --> < feComponentTransfer in = "shadow" result = "shadow" > <!-- Shadow Opacity --> < feFuncA type = "linear" slope = "0.5" /> </ feComponentTransfer > < feComposite operator = "over" in = "shadow" in2 = "SourceGraphic" /> <!-- Put shadow over original object --> </ filter > < filter id = "inset-shadow-big-bottom" > < feOffset dx = "0" dy = "10" /> <!-- Shadow Offset --> < feGaussianBlur stdDeviation = "2" result = "offset-blur" /> <!-- Shadow Blur --> < feComposite operator = "out" in = "SourceGraphic" in2 = "offset-blur" result = "inverse" /> <!-- Invert the drop shadow to create an inner shadow --> < feFlood flood-color = " # FFF" flood-opacity = "1" result = "color" /> <!-- Color & Opacity --> < feComposite operator = "in" in = "color" in2 = "inverse" result = "shadow" /> <!-- Clip color inside shadow --> < feComponentTransfer in = "shadow" result = "shadow" > <!-- Shadow Opacity --> < feFuncA type = "linear" slope = "0.5" /> </ feComponentTransfer > < feComposite operator = "over" in = "shadow" in2 = "SourceGraphic" result = 'final-shadow-1' /> <!-- Put shadow over original object --> < feOffset dx = "0" dy = "-12" /> <!-- Shadow Offset --> < feGaussianBlur stdDeviation = "2" result = "offset-blur" /> <!-- Shadow Blur --> < feComposite operator = "out" in = "final-shadow-1" in2 = "offset-blur" result = "inverse" /> <!-- Invert the drop shadow to create an inner shadow --> < feFlood flood-color = "#69c39b" flood-opacity = "1" result = "color" /> <!-- Color & Opacity --> < feComposite operator = "in" in = "color" in2 = "inverse" result = "shadow" /> <!-- Clip color inside shadow --> < feComponentTransfer in = "shadow" result = "shadow" > <!-- Shadow Opacity --> < feFuncA type = "linear" slope = "0.5" /> </ feComponentTransfer > < feComposite operator = "over" in = "shadow" in2 = "final-shadow-1" result = 'final-shadow-2' /> <!-- Put shadow over original object --> </ filter > < line arg ra die nt 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 = "#f DF efe" /> < 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 -i nner" 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)" > < ani MATE Transform 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 = " 360 0s" 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 -t op : 20px ; padding : 20px ; }
总结
以上是 为你收集整理的 利用纯html5绘制出来的一款非常漂亮的时钟 全部内容，希望文章能够帮你解决 利用纯html5绘制出来的一款非常漂亮的时钟 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用纯html5绘制出来的一款非常漂亮的时钟的详细内容...