css实现不同颜色的进度条样式效果代码
代码语言:html
所属分类:进度条
代码描述:css实现不同颜色的进度条样式效果代码
下面为部分代码预览,完整代码请点击下载或在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/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style type="text/css"> .demo{ padding: 2em 0; background: #dbc1af; } .progress{ height: 7px; background: #e3e3e3; border-radius: 0; box-shadow: none; margin: 40px 0 80px; overflow: visible; position: relative; } .progress .progress-title{ padding: 7px 10px; margin: 0; background: #393a3d; border-radius: 5px 0 0 5px; box-shadow: 0 7px 7px rgba(0,0,0,0.4); font-size: 18px; font-weight: 700; color: #fff; text-transform: uppercase; position: absolute; top: -13px; left: 0; z-index: 1; } .progress .progress-title:after{ content: ""; border-left: 17px solid #393a3d; border-top: 17px solid transparent; border-bottom: 17px solid transparent; position: absolute; top: 0; right: -17px; } .progress .progress-bar{ box-shadow: none; border-radius: 0; position: relative; -webkit-animation: animate-positive 2s; animation: animate-positive 2s; } .progress .progress-bar:after{ content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 5px 5px rgba(0,0,0,0.6); background: #fff; position: absolute; right: -5px; top: -6px; } .progress .progress-value{ width: 45px; height: 30px; line-height: 30px; border-radius: 3px; background: #393a3d; box-shadow: 0 5px 5px rgba(0,0,0,0.4); font-size: 15px; font-weight: 700; color: #fff; text-align: center; position: absolute; bottom: 30px; right: -17px; } .progress .progress-value:after{ content: ""; border-top: 7px solid #393a3d; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; bottom: -7px; left: 35%; } .progress.green .progress-bar:after{ border: 5px solid #21.........完整代码请登录后点击上方下载按钮下载查看
网友评论0