.img-36 {
width:36px;
}
.mC-bar-box {
height:56px;
margin:0 24px;
}
.mC-bar-tips {
padding-left:5px;
}
.mC-bar-tips-word {
text-align:center;
width:46px;
height:20px;
color:#FFF;
font-size:12px;
animation:tipsMove 2s linear;
}
@keyframes tipsMove {
0% {
margin-left:0%;
}
}.mC-bar-tips1 {
background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat;
background-size:100%;
}
.mC-bar-tips2 {
background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat;
background-size:100%;
}
.mC-bar-tips3 {
background:url("http://www.jq22.com/img/cs/500x300-3.png") no-repeat;
background-size:100%;
}
.mC-bar-tips4 {
background:url("http://www.jq22.com/img/cs/500x300-4.png") no-repeat;
background-size:100%;
}
.mC-bar-l-img {
position:absolute;
z-index:2;
}
.mC-bar-r-img {
position:absolute;
right:24px;
}
.mC-bg-bar {
height:5px;
border-radius:5px;
width:calc(100% - 100px);
margin-top:12px;
position:absolute;
margin-left:26px;
}
.mC-bg-bar1 {
background-color:#fbdfdf;
}
.mC-bg-bar2 {
background-color:#dadbe4;
}
.mC-bg-bar3 {
background-color:#fee9cc;
}
.mC-bg-bar4 {
background-color:#ede0ff;
}
.mC-bar {
width:0%;
height:5px;
border-radius:5px;
animation:move 2s linear;
}
.mC-bar1 {
background:#e22728;
background:-webkit-linear-gradient(left,#e22728,#ec7f00);
/* Safari 5.1 - 6.0 */
background:-o-linear-gradient(left,#e22728,#ec7f00);
/* Opera 11.1 - 12.0 */
background:-moz-linear-gradient(left,#e22728,#ec7f00);
/* Firefox 3.6 - 15 */
background:linear-gradient(left,#e22728,#ec7f00);
/* 标准的语法 */
}
.mC-bar2 {
background:#d94900;
background:-webkit-linear-gradient(left,#d94900,#8487a4);
/* Safari 5.1 - 6.0 */
background:-o-linear-gradient(left,#d94900,#8487a4);
/* Opera 11.1 - 12.0 */
background:-moz-linear-gradient(left,#d94900,#8487a4);
/* Firefox 3.6 - 15 */
background:linear-gradient(left,#d94900,#8487a4);
/* 标准的语法 */
}
.mC-bar3 {
background:#8487a4;
background:-webkit-linear-gradient(left,#8487a4,#fc9300);
/* Safari 5.1 - 6.0 */
background:-o-linear-gradient(left,#8487a4,#fc9300);
/* Opera 11.1 - 12.0 */
background:-moz-linear-gradient(left,#8487a4,#fc9300);
/* Firefox 3.6 - 15 */
background:linear-gradient(left,#8487a4,#fc9300);
/* 标准的语法 */
}
.mC-bar4 {
background:#fc9300;
background:-webkit-linear-gradient(left,#fc9300,#a766ff);
/* Safari 5.1 - 6.0 */
background:-o-linear-gradient(left,#fc9300,#a766ff);
/* Opera 11.1 - 12.0 */
background:-moz-linear-gradient(left,#fc9300,#a766ff);
/* Firefox 3.6 - 15 */
background:linear-gradient(left,#fc9300,#a766ff);
/* 标准的语法 */
}
@keyframes move {
0% {
width:0%;
}
}发布时间:2019-07-04 22:37:32
var classnum = 3; //属于哪个阶段 1-4 var classnum1 = classnum + 1; //1 是铜星 2 是银星 3 是金星 4 是钻星 var barwidth = 50; //值在这个阶段的百分比
可以根据需求不同换掉不同的图片