横向滚动的VIP效果

H5/Mini-Program 专栏收录该内容
50 篇文章 0 订阅
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Yeshen</title>
    <style type="text/css">
    ul.vip-pad {white-space: nowrap;margin: 0px;padding: 0px 12px;box-sizing: border-box;-webkit-overflow-scrolling: touch;position: absolute;width: 99%;top: 34px;right: 0px;left: 0px;z-index: 15}
    @media all and (-webkit-transform-3d) {ul.vip-pad {overflow-x: scroll;overflow-y: hidden;}
    }
    ul.vip-pad li{display: inline-block;vertical-align: middle;margin-left: -7px;width: 44px;height: 62px; margin-right: 41px;text-align: center;position: relative;}
    ul.vip-pad li.icon{white-space: normal;margin-top: 2px;z-index: 16;}
    ul.vip-pad .icon img{height: 36px;position: absolute;left: 4px;margin-top: 13px;}
    ul.vip-pad .progress{position:absolute;top:30px;left: 22px; z-index: 15;background-color:#212224; width: 1234px;height: 3px;}
    ul.vip-pad .progress .progress-value{line-height: 3px;background-color:#FFC23A;height: 3px;width: 20%;}
    ::-webkit-scrollbar {height: 0px;}
    </style>
</head>
<body>
    <ul class="vip-pad">
        <div class="progress"><div class="progress-value"></div></div>
        <li class="icon"><img src="img/vip0.png"></img></li>
        <li class="icon"><img src="img/vip1.png"></img></li>
        <li class="icon"><img src="img/vip2.png"></img></li>
        <li class="icon"><img src="img/vip3.png"></img></li>
        <li class="icon"><img src="img/vip4.png"></img></li>
        <li class="icon"><img src="img/vip5.png"></img></li>
        <li class="icon"><img src="img/vip6.png"></img></li>
        <li class="icon"><img src="img/vip7.png"></img></li>
        <li class="icon"><img src="img/vip8.png"></img></li>
        <li class="icon"><img src="img/vip9.png"></img></li>
        <li class="icon"><img src="img/vip10.png"></img></li>
        <li class="icon"><img src="img/vip11.png"></img></li>
        <li class="icon"><img src="img/vip12.png"></img></li>
        <li class="icon"><img src="img/vip13.png"></img></li>
        <li class="icon"><img src="img/vip14.png"></img></li>
        <li class="icon"><img src="img/vip15.png"></img></li>
    </ul>
</body>
</html>

为这个效果磨了一晚上,权当做个笔记吧
在这里插入图片描述

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页

打赏

雨声不在

有收获才赞赏

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值