css mask 漸變動畫另類寫法 就是改變寬度做動畫 裡面漸變寫死

    html,
    body {
      margin: 0;
      padding: 0;
    }
    .rect {
      height: 10px;
      width: 100vw;
      background-image: linear-gradient(to right, #000 80%, #fff);
    }
    .mask {
      -webkit-mask-image: linear-gradient(
        to right,
        rgba(
 
0, 0, 0, 1) 80%,
        transparent
      );
      mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, transparent);
    }
    html {
      font-size: 14px;
      line-height: 3;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans'
 
, 'Helvetica Neue', sans-serif;
    }
    .tab-wrap {
      padding: 0 2em 0 1em;
      position: relative;
      width: 300px;
      /* height: 12px; */
      border-radius: 6px 6px 0 0;
      background-color: #333333;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align
 
-items: center;
      color: rgba(255, 255, 255, 0.8);
      display: inline-block;
    }
    .tab-wrap .tab {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tab .tab-text {
      white-space: nowrap;
    }
    .tab-wrap .close {
      position: absolute;
      right: 0;
      width: 2em;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cursor {
      user-select: none;
      cursor: default;
    }
    @supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
      .tab-wrap .tab {
        text-overflow: clip;
        -webkit-mask-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) calc(100% - 2em),
          transparent
        );
        mask-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) calc(100% - 2em),
          transparent
        );
      }
    }

  

如果遇到什麼不懂的地方直接關注公眾號留言(本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連線，否則保留追究法律責任的權利。)
作者：newmiracle
出處：https://www.cnblogs.com/newmiracle/