zouyu

  • 移动端左右滑动

    css3移动端左右滑动

    移动端左右滑动

    <!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div class="roll">
      <div class="roll_inner">
        <div class="roll_col">
          <div class="img_box" v-for="(gt,index) in 6" :key="index">
            <img
              src="https://img.yzcdn.cn/vant/leaf.jpg"
              style="width:95px;height:95px"
            />
          </div>
        </div>
      </div>
    </div>

    <style>
      .roll {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        &::-webkit-scrollbar {
          display: none;
        }
        &_inner {
          display: flex;
          height: 95px;
          margin: 0 15px;
          .roll_col {
            margin-right: 10px;
            display: flex;
            .img_box {
              width: 95px;
              display: flex;
              height: 95px;
              justify-content: center;
              align-items: flex-start;
              border-radius: 10px;
              overflow: hidden;
              background: linear-gradient(
                135deg,
                rgba(255, 173, 132, 1) 0%,
                rgba(255, 154, 103, 1) 100%
              );
              margin-right: 10px;
              img {
                height: auto;
              }
            }
          }
        }
      }
    </style>
  </body>
</html>
    上次更新: