Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.