.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; //值在这个阶段的百分比
可以根据需求不同换掉不同的图片