Css3 遮罩动画

[gaowei1012]

使用 animation css3线性动画

[gaowei1012]

html

<div className={styles.productContent}>
            <div
                className={styles.productList} >
                <img className={styles.img} src='http://xxx' />
                <div className={styles.box}>
                  <span className={styles.listContent}>我是内容</span>
                </div>
            </div>
 </div>

[gaowei1012]

css

.productContent {
      min-width: 1200px;
      width: 80%;
      padding: 1rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;

      .productList {
        width: 30%;
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
        overflow: hidden;
        .img {
          height: 150px;
          width: 360px;
          border-radius: 2px;
        }

        .box {
          position: absolute;
          display: none;
          height: 150px;
          width: 360px;
          border-radius: 2px;

        }
      }

      .productListNo {
        height: 150px;
        width: 30%;
      }

      // hover
      .productList:hover {
        width: 30%;
        z-index: 999;

        .box {
          overflow: hidden;
          background-color: rgba(19, 18, 18, 0.6);
          height: 150px;
          width: 360px;
          display: flex;
          opacity: .8;
          color: white;
          align-items: center;
          animation-duration: .5s;
          animation-fill-mode: both;
          animation-name: slideInFromBottom;

          .listContent {
            width: 90%;
            display: inline-block;
            margin: 0 auto;
          }
        }
      }
    }

[gaowei1012]

css

 // 鼠标移入动画
    @keyframes slideInFromBottom {
      from {
        opacity: .2;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
      }

      to {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
      }
    }