利用纯html5绘制出来的一款非常漂亮的时钟
今天给大家分享一款非常漂亮的纯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" /> <!-- Shadow Offset --> < feGaussianBlur stdDeviation = "15" 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 = "black" 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 = "1" /> </ feComponentTransfer > < feComposite operator = "over" in = "shadow" in2 = "SourceGraphic" /> <!-- Put shadow over original 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 > < 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" 首页 > 软件教程声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
