这里记录一种用css控制进度条美化的效果
css代码:
@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0 } to { background-position: 40px 0 } } @keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } .progress { display: block; width:600px; height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f7f7f7; background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9); background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9)); background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9); background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9); background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9); background-repeat: repeat-x; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#fff5f5f5‘,endColorstr=‘#fff9f9f9‘,GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) } .progress .bar { float: left; width: 80%; height: 100%; font-size: 12px; color: #fff; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top,#149bdf,#0480be); background-image: -webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be)); background-image: -webkit-linear-gradient(top,#149bdf,#0480be); background-image: -o-linear-gradient(top,#149bdf,#0480be); background-image: linear-gradient(to bottom,#149bdf,#0480be); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff149bdf‘,endColorstr=‘#ff0480be‘,GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width .6s ease; -moz-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease } .progress-striped .bar { -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px } .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite } .progress-danger.progress-striped .bar { background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent)); background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent) }
html代码:
<span class="progress progress-danger progress-striped active"> <span class="bar"></span> </span>
实现效果:
原文地址:https://www.cnblogs.com/shenpeng/p/10974032.html
时间: 2024-10-04 04:45:06