[css] Text Gradient with Gradient Rotate Animation 텍스트 그라디언트 효과

Text Gradient

HTML 구조:

<span class="text-gradient">
   <span>
      Text Gradient
   </span>
</span>

scss 버전:

.text-gradient {
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.4;
  &:before {
    content: '';
    position: absolute;
    width: 110%;
    padding: 50% 0;
    top: 50%;
    left: -5%;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: center;
    background-image: linear-gradient(0, #DE6262, #FFB88C);
    background-size: 100% 100%;
    animation: rotate 2s infinite linear;   
    animation-fill-mode: backwards;
    animation-direction: alternate;
  }  
  span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    mix-blend-mode: screen;
    background-color: #fff;
    color: #000;
  }
}
@keyframes rotate {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(180deg);
  }
}

---

uiGradients - Beautiful colored gradients