如何实现 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>
监听touchmove事件,进行操作
其实这是有两层的,上面那层就单纯等级图标往左移动,下面那层是个进度条,先是增加,再定住不动,再往左退一点.
ok 谢谢 我试试
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
发布评论
评论(4)
不考虑拖动的话,可以定位两个层,头像一层z轴2,等级一层z轴1,然后将头像定位到中间位置,用left:-n%,(n值自己试,可以用vw单位控制),不同等级不同的left值
代码如下
监听touchmove事件,进行操作
其实这是有两层的,上面那层就单纯等级图标往左移动,下面那层是个进度条,先是增加,再定住不动,再往左退一点.
ok 谢谢 我试试