淘宝会员俱乐部那样的会员等级进度条 显示vip等级 用户头像在进度条上根据vip等级移动

✓ 已被采纳

不考虑拖动的话，可以定位两个层，头像一层z轴2，等级一层z轴1，然后将头像定位到中间位置，用left：-n%，（n值自己试，可以用vw单位控制），不同等级不同的left值

代码如下

<style type="text/css">
.a {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
ul {
    list-style-image: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.b {
    height: 10px;
    width: 100%;
    position: absolute;
    top: 50%;
    background-color: rgba(255,51,0,1);
    border-radius: 6px;
    overflow: hidden;
    margin-top: -5px;
}
.b span {
    display: block;
    height: 10px;
    width: 10px;
    background-color: rgba(255,255,0,1);
    border-radius:5px;
    animation: huatiao 3s ease-out 0s 1 forwards;
}
@keyframes huatiao{
    0%{width:10px}
    40%{width:90%}
    100%{width:50%}
}
.c{
    width: 500%;
    height: 50px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    left:250px;    
    animation: jindu 9s ease 0.5s 1 forwards;
}
.c li {
    display: block;
    height: 50px;
    width: 50px;
    background-color: rgba(255,204,102,1);
    float: left;
    margin-right: 210px;
}
@keyframes jindu{
    0%{left:250px}
    
    100%{left:-1000px}
}
</style>

    <body>
<div class="a">
  <div class="b"><span></span></div>
  <div class="c">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>
</div>
</body>