css实现圆形容器百分比进度效果代码
代码语言:html
所属分类:进度条
代码描述:css实现圆形容器百分比进度效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background: #dfdfdf; font-family: "Microsoft Yahei", Arial; } .r_out { width: 200px; height: 200px; border: 8px solid #d9d9d9; background: #fff; box-shadow: 3px 3px 5px #bfbfbf; -webkit-box-shadow: 3px 3px 5px #bfbfbf; -moz-box-shadow: 3px 3px 5px #bfbfbf; -ms-box-shadow: 3px 3px 5px #bfbfbf; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms_border-radius: 50%; display: inline-block; margin-right: 50px; position: relative; } .r_out p { position: absolute; bottom: -50px; color: #000; text-align: center; margin: 0 auto; width: 100%; font-size: 16px; line-height: 1.5; font-weight: bold; } .r_in { width: 180px; height: 180px; border: 10px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms_border-radius: 50%; overflow: hidden; position: relative; } .r_c { width: 180px; height: 180px; position: absolute; bottom: 0; left: 0; height: 0; } .c1 { background: #fbad4c; } .c2 { background: #87d7a5; } .c3 { background: #00adc7; } .r_num { color: #404040; font-size: 40px; line-height: 1.5; font-weight: bold; position: ab.........完整代码请登录后点击上方下载按钮下载查看
网友评论0