横向滚动的VIP效果

<!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>

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

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页