@nicecode/funny/es/gradientText/index.less

funny,一些有趣的代码,funny code

.gradientMask {
    height: 100%;
    width: 100%;
    font-size: 50px;
    letter-spacing: 1px;
    font-weight: bold;
    background: linear-gradient(0deg, #e55d87, #5fc3e4);
    background-size: 400% 400%;
    animation: Gradient 4s linear infinite;
    @keyframes Gradient {
        0% {
          background-position: 50% 0%
        }

        50% {
          background-position: 50% 100%
        }

        100% {
          background-position: 50% 0%
        }
      }
    svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    text {
        text-anchor: middle;
    }
    svg mask rect {
        fill: #eee;
    }
    svg > rect {
        fill: #eee;
        mask: url(#gradientMask_svg__mask);
    }
}