javascript - 淘宝会员俱乐部那样的会员等级进度条 显示vip等级 用户头像在进度条上根据vip等级移动
本文介绍了javascript - 淘宝会员俱乐部那样的会员等级进度条 显示vip等级 用户头像在进度条上根据vip等级移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如何实现 wap端
解决方案
不考虑拖动的话，可以定位两个层，头像一层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>这篇关于javascript - 淘宝会员俱乐部那样的会员等级进度条 显示vip等级 用户头像在进度条上根据vip等级移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
