html5 css3 怎么制作简单的进度条

Answer 1

HTML代码：<section class="container"><div class="progress"><span style="width: 20%;"><span>20%</span></span></div><div class="progress"><span class="green" style="width: 40%;"><span>40%</span></span></div><div class="progress"><span class="orange" style="width: 60%;"><span>60%</span></span></div><div class="progress"><span class="red" style="width: 80%;"><span>80%</span></span></div><div class="progress"><span class="blue" style="width: 100%;"><span>100%</span></span></div></section>从HTML结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。CSS代码：.progress {height: 20px;background: #ebebeb;border-left: 1px solid transparent;border-right: 1px solid transparent;border-radius: 10px;}.progress > span {position: relative;float: left;margin: 0 -1px;min-width: 30px;height: 18px;line-height: 16px;text-align: right;background: #cccccc;border: 1px solid;border-color: #bfbfbf #b3b3b3 #9e9e9e;border-radius: 10px;background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);}.progress > span > span {padding: 0 8px;font-size: 11px;font-weight: bold;color: #404040;color: rgba(0, 0, 0, 0.7);text-shadow: 0 1px rgba(255, 255, 255, 0.4);}.progress > span:before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;height: 18px;background: url("../img/progress.png") 0 0 repeat-x;border-radius: 10px;}.progress .green {background: #85c440;border-color: #78b337 #6ba031 #568128;background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);}.progress .red {background: #db3a27;border-color: #c73321 #b12d1e #8e2418;background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);}.progress .orange {background: #f2b63c;border-color: #f0ad24 #eba310 #c5880d;background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);}.progress .blue {background: #5aaadb;border-color: #459fd6 #3094d2 #277db2;background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);}