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

发布于 2022-09-04 19:22:32 字数 145 浏览 10 评论 0

如何实现 wap端

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

小糖芽 2022-09-11 19:22:32

不考虑拖动的话,可以定位两个层,头像一层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>
半山落雨半山空 2022-09-11 19:22:32

监听touchmove事件,进行操作

甜中书 2022-09-11 19:22:32

其实这是有两层的,上面那层就单纯等级图标往左移动,下面那层是个进度条,先是增加,再定住不动,再往左退一点.

他不在意 2022-09-11 19:22:32

ok 谢谢 我试试

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文