bootstrap实现一个箭头彩色进度条效果代码
代码语言:html
所属分类:进度条
代码描述:bootstrap实现一个箭头彩色进度条效果代码
下面为部分代码预览,完整代码请点击下载或在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/bootstrap.4.3.1.min.css"> <style type="text/css"> .demo { padding:12em; background:#fff; } .progress { height:20px; background:#fff; border-radius:15px 0 0 15px; box-shadow:none; margin:20px 50px 40px 100px; overflow:visible; position:relative; } .progress .progress-title { display:block; font-size:18px; font-weight:700; color:#205580; position:absolute; bottom:-3px; left:-90px; } .progress .progress-bar { background:#fff; box-shadow:none; border-radius:15px 0 0 15px; position:relative; -webkit-animation:animate-positive 2s; animation:animate-positive 2s; } .progress .progress-bar:before { content:""; border-top:20px solid transparent; border-bottom:20px solid transparent; position:absolute; top:-10px; right:-20px; } .progress .progress-value { display:block; font-size:18px; font-weight:700; color:#205580; position:absolute; bottom:-5px; right:-50px; } .progress.pink .progress-bar:before { border-left:20px solid #ff4a98; } .progress.blue .progress-bar:before { border-left:20px solid #2c5af9; } .progress.green .progress-bar:before { border-left:20px solid #7cf210; } .progress.orange .progress-bar:before { border-left:20px solid #ff5f25; } @-webkit-keyframes animate-positive { 0% { width:0; } }@keyframes animate-positive { 0% { width:0; } } </style> </head> <body> <div class="demo"> <div class="container"> <div class.........完整代码请登录后点击上方下载按钮下载查看
网友评论0