怎么用纯html5投射出一个非常漂亮的时钟

今天小编给大家分享一下怎么用纯html5投射出一个非常漂亮的时钟的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

实现的代码。

　　htm代码：

XML / HTML代码将内容复制到文本

< div class = "容器" >

< svg宽度= " 600"高度= " 600"类= 'svg-元素' >

<过滤器ID = " f4" x = " -50％" y = " -20％"宽度= " 200％"高度= " 140％" >

< feOffset结果= " offOut" in = " SourceAlpha" dx = " 0" dy = " 25" />

< feGaussianBlur结果= " blurOut" in = " offOut" stdDeviation = " 10" />

< feBlend in = " SourceGraphic" in2 = " blurOut"模式= "正常" />

<过滤器ID = "模糊源" x = " -50％" y = " -20％"宽度= " 200％"高度= " 140％" >

< feGaussianBlur in = " color" stdDeviation = " 5"结果= " blurOut" />

<过滤器ID = "插入阴影" >

< feOffset dx = " 0" dy = " 10" /> <！-阴影偏移->

< feGaussianBlur stdDeviation = " 15"结果= " offset-blur" /> <！-阴影模糊->

< feComposite运算符= " out" in = " SourceGraphic" in2 = " offset-blur"结果= " inverse" /> <！-反转投影阴影以创建内部阴影->

< feFlood Flood-color = "黑色" Flood-opacity = " 1"结果= " color" /> <！-颜色和不透明度->

< feComposite运算符= " in" in = "颜色" in2 = "反" result = "阴影" /> <！-阴影内的剪辑颜色->

< feComponentTransfer in = "阴影"结果= "阴影" > <！-阴影不透明度->

< feFuncA类型= "线性"斜率= " 1" />

< feComposite运算符= " over" in = "阴影" in2 = " SourceGraphic" /> <！-在原始对象上放置阴影->

<过滤器ID = "插入阴影大" >

< feOffset dx = " 0" dy = " 4" /> <！-阴影偏移->

< feGaussianBlur stdDeviation = " 2"结果= " offset-blur" /> <！-阴影模糊->

< feComposite运算符= " out" in = " SourceGraphic" in2 = " offset-blur"结果= " inverse" /> <！-反转投影阴影以创建内部阴影->

< feFlood Flood-color = "白色" Flood-opacity = " 1"结果= " color" /> <！-颜色和不透明度->

< feComposite运算符= " in" in = "颜色" in2 = "反" result = "阴影" /> <！-阴影内的剪辑颜色->

< feComponentTransfer in = "阴影"结果= "阴影" > <！-阴影不透明度->

< feFuncA类型= "线性"斜率= " 0.5" />

< feComposite运算符= " over" in = "阴影" in2 = " SourceGraphic" /> <！-在原始对象上放置阴影->

<过滤器ID = "插入阴影大底部" >

< feOffset dx = " 0" dy = " 10" /> <！-阴影偏移->

< feGaussianBlur stdDeviation = " 2"结果= " offset-blur" /> <！-阴影模糊->

< feComposite运算符= " out" in = " SourceGraphic" in2 = " offset-blur"结果= " inverse" /> <！-反转投影阴影以创建内部阴影->

< feFlood Flood-color = " #FFF" Flood-opacity = " 1"结果= " color" /> <！-颜色和不透明度->

< feComposite运算符= " in" in = "颜色" in2 = "反" result = "阴影" /> <！-阴影内的剪辑颜色->

< feComponentTransfer in = "阴影"结果= "阴影" > <！-阴影不透明度->

< feFuncA类型= "线性"斜率= " 0.5" />

< feComposite运算符= " over" in = "阴影" in2 = " SourceGraphic"结果= 'final-shadow-1' /> <！-将阴影放在原始对象上->

< feOffset dx = " 0" dy = " -12" /> <！-阴影偏移->

< feGaussianBlur stdDeviation = " 2"结果= " offset-blur" /> <！-阴影模糊->

< feComposite运算符= " out" in = "最终阴影-1" in2 = "偏移模糊" result = " inverse" /> <！-反转投影阴影以创建内部阴影->

< feFlood Flood-color = "＃69c39b" Flood-opacity = " 1"结果= " color" /> <！-颜色和不透明度->

< feComposite运算符= " in" in = "颜色" in2 = "反" result = "阴影" /> <！-阴影内的剪辑颜色->

< feComponentTransfer in = "阴影"结果= "阴影" > <！-阴影不透明度->

< feFuncA类型= "线性"斜率= " 0.5" />

< feComposite运算符= " over" in = "阴影" in2 = "最终阴影1"结果= '最终阴影2' /> <！-将阴影放在原始对象上->

< 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 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 id = " arrow1"

gradientTransform = " rotate（-90 .5 .5）" >

< stop id = " s0" offset = " 0" stop-color = "＃07594f" />

< stop id = " s2" offset = " 1" stop-color = "＃01443c" />

< 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 id = "中央旋钮外框"

gradientTransform = " rotate（90 .5 .5）" >

< stop id = " s0" offset = " 0" stop-color = " #fffefe" />

< stop id = " s2" offset = " 1" stop-color = "＃86ecdb" />

< linearGradient id = "中央旋钮内部"

gradientTransform = " rotate（90 .5 .5）" >

< stop id = " s0"偏移= " 0" stop-color = "＃a0dcd2" />

< stop id = " s2" offset = " 1" stop-color = "＃dff9ef" />

< g transform = " translate（50，20）" >

< rect x = " 0" y = " 0"

宽度= " 382"高度= " 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宽度= " 200"高度= " 200"

transform = " translate（100，100）" >

< animateTransform attributeName = " transform"类型= " translate" dur = " 4s"

值= " 191,191; 191,191" repeatCount = "不确定" />

< animateTransform attributeName = " transform"加成= " sum"类型= " rotate"

DUR = "86400秒"的值= "200，0 0 550 0 0" repeatCount = "不确定" />

< rect x = " 0" y = " 0"

宽度= " 22"高度= " 70"

fill = " url（＃arrow1）"

填充不透明度= " 0.5"

filter = " url（＃blurred-source）"

rx = " 10" ry = " 10"

transform = " translate（-11，-15）" />

< g宽度= " 200"高度= " 200"

transform = " translate（100，100）" >

< animateTransform attributeName = " transform"类型= " translate" dur = " 4s"

值= " 191,191; 191,191" repeatCount = "不确定" />

< animateTransform attributeName = " transform"加成= " sum"类型= " rotate"

DUR = "86400秒"的值= "200，0 0 550 0 0" repeatCount = "不确定" />

< rect x = " 0" y = " 0"

宽度= " 20"高度= " 70"

fill = " url（＃arrow1）"

rx = " 10" ry = " 10"

transform = " translate（-10，-10）" />

< g宽度= " 200"高度= " 200"

transform = " translate（100，100）" >

< animateTransform attributeName = " transform"类型= " translate" dur = " 4s"

值= " 191,191; 191,191" repeatCount = "不确定" />

< animateTransform attributeName = " transform"加成= " sum"类型= " rotate"

dur = " 3600s"值= " 90,0 0; 450 0 0" repeatCount = "不确定" />

< rect x = " 0" y = " 0"

宽度= " 18"高度= " 104"

fill = " url（＃arrow1）"

填充不透明度= " 0.8"

filter = " url（＃blurred-source）"

rx = " 8" ry = " 8"

transform = " translate（-9，-15）" > />

< g宽度= " 200"高度= " 200"

transform = " translate（100，100）" >

< animateTransform attributeName = " transform"类型= " translate" dur = " 4s"

值= " 191,191; 191,191" repeatCount = "不确定" />

< animateTransform attributeName = " transform"加成= " sum"类型= " rotate"

dur = " 3600s"值= " 90,0 0; 450 0 0" repeatCount = "不确定" />

< rect x = " 0" y = " 0"

宽度= " 16"高度= " 104"

fill = " url（＃arrow1）"

rx = " 8" ry = " 8"

transform = " translate（-8，-8）" > />

< g宽度= " 200"高度= " 200" >

< animateTransform attributeName = " transform"类型= " translate" dur = " 4s"

值= " 195,195; 190,195" repeatCount = "不确定" />

< animateTransform attributeName = " transform"加成= " sum"类型= " rotate"

dur = " 60s"值= " 0,0 0; 360 0 0" repeatCount = "不确定" />

< rect class = " arrowRed"

x = " 0" y = " 0"

宽度= " 8"高度= " 120"

fill = " url（#arrowRed）"

filter = " url（＃blurred-source）"

填充不透明度= " 0.5"

rx = " 3" ry = " 3"

transform = " translate（-3，-20）" />

< g宽度= " 200"高度= " 200"

transform = " translate（100，100）" >

< animateTransform attributeName = " transform"类型= " translate" dur = " 4s"

值= " 191,191; 191,191" repeatCount = "不确定" />

< animateTransform attributeName = " transform"加成= " sum"类型= " rotate"

dur = " 60s"值= " 0,0 0; 360 0 0" repeatCount = "不确定" />

< rect class = " arrowRed"

x = " 0" y = " 0"

宽度= " 6"高度= " 134"

fill = " url（#arrowRed）"

rx = " 3" ry = " 3"

transform = " translate（-3，-20）" />

< g宽度= " 200"高度= " 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）" />

<！- < path d =" M 200 20

200 40

180 30 z" > - >

　　css3代码：

CSS代码将内容复制到文本

。容器

{

text-align ： center ;

宽度：100％;

页边距： 20px ;

填充： 20px ;

}

以上就是"怎么用纯html5投射出一个非常漂亮的时钟"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。