How to project a very beautiful clock with pure html5
Today, I would like to share with you how to use pure html5 to project a very beautiful clock, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.
The code for the implementation.
Htm Code:
XML / HTML code copies content to text
< div class = "容器" > < svg宽度= " 600"高度= " 600"类= 'svg-元素' > < feOffset结果= " offOut" in = " SourceAlpha" dx = " 0" dy = " 25" /> < feGaussianBlur结果= " blurOut" in = " offOut" stdDeviation = " 10" /> < feBlend in = " SourceGraphic" in2 = " blurOut"模式= "正常" /> < feGaussianBlur in = " color" stdDeviation = " 5"结果= " blurOut" /> < 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" /> < 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" /> < 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）" />->
Css3 Code:
CSS code copies content to text
. Container
{
Text-align: center
Width: 100%
Margins: 20px
Fill: 20px
}
These are all the contents of the article "how to project a very beautiful clock with pure html5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
