本篇教程探讨了图片列表展示特效，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

CSS代码

.main-cons{

    background: #F7F5F2;

    padding:100px 0;

  }

  .container{

    width: 80%;

    margin: 0 auto;

    display: grid;

    grid-template-columns: auto auto auto;

    grid-gap: 60px;

  }

  .container .item{

    position: relative;

    transform: skew(-10deg);

    transition: all 0.25s;

  }

  .container .item .card{

    height: 200px;

    background: #808080;

    border-radius: 40px;

    overflow: hidden;

    position: relative;

    transition: all 0.25s;

  }

  .container .item::before{

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    z-index: -1;

    width: calc(100% - 10px);

    height: calc(100% - 10px);

    border-radius: 40px;

    opacity: 0;

    border: 2px solid #373f51;

    transition: all 0.5s 0.05s;

  }

  .container .item .card::after{

    content: " ";

    display: block;

    position: absolute;

    left: 0;

    top: 0;

    background: url("//img.hb.aicdn.com/3f8e4597fdfba9da223f56301bc59a22692d972b112463-N0jS1j_fw658") no-repeat;

    background-size:cover;

    background-blend-mode: screen;

    width: 100%;

    height: 100%;

    z-index: 2;

    transform: skew(10deg) scale(1.2);

    transition:all 0.2s;

    background-color: #373f51;

  }

  .container .item:hover::before{

    transform: translate(10px,10px);

    opacity: 1;

  }

  .container .item:hover .card::after{

    background-blend-mode: normal;

  }

  .container .item:hover .card{

    transform: translate(-10px,-10px);

  }

HTML代码

<div class="main-cons">

  <div class="container">

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

    <div class="item">

      <div class="card">

      </div>

    </div>

  </div></div>

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！