circles实现圆环进度条效果代码
代码语言:html
所属分类:进度条
代码描述:circles实现圆环进度条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css"> <style> body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body{ font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } a{color: #2fa0ec;text-decoration: none;outline: none;} a:hover,a:focus{color:#74777b;} .htmleaf-container{ margin: 0 auto; text-align: center; overflow: hidden; } /* Header */ .htmleaf-header{ padding: 1em 190px 1em; letter-spacing: -1px; text-align: center; background: #66677c; } .htmleaf-header h1 { color: #D5D6E2; font-weight: 600; font-size: 2em; line-height: 1; margin-bottom: 0; font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } .htmleaf-header h1 span { font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; display: block; font-size: 60%; font-weight: 400; padding: 0.8em 0 0.5em 0; color: #c3c8cd; } /*nav*/ .htmleaf-demo a{color: #fff;text-decoration: none;} .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;} .htmleaf-demo a:hover{opacity: 0.6;} .htmleaf-demo a.current{background:#1d7db1;color: #fff; } button{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;background-color: #fff;} </style> <style> #canvas .circle { display: inline-block; margin: 1em; } .circles-decimals { font-size: .4em; } </style> </head> <body> <article class="htmleaf-container"> <div id="canvas"> <div class=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0