背景1

背景2

背景3

背景4

背景5

    <ul class="accordion-container">
      <li class="accordion-item" style="background-image: url(bg1.jpg);">
        <p class="accordion-title">背景1</p>
      </li>
      ···
    </ul>
复制html
  .accordion-container {
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .accordion-item {
        list-style: none;
        height: 500px;
        transition: width 0.5s;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        &:not(:hover) {
          width: 20%;
        }
        &:hover {
          width: 800px;
          &::after {
            opacity: 1;
          }
        }
        &::after{
          content:'';
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: rgba(0, 0, 0, .4);
          z-index: 1;
          opacity: 0;
          transition: opacity 0.5s;
        }
        .accordion-title {
          color: #fff;
          font-size: 18px;
          z-index: 2;
        }
      }
    }
复制css

专注服务于开发者的平台

冀ICP备12011960号-21

FLOW Link

devland@163.com技术咨询和服务
站点地图

代码观察

欢迎关注服务号更多技术等你来看

专注服务于开发者的平台

冀ICP备12011960号-21