css3 텍스트 색상 동적 그래디언트

Animate 찾아보기.css 홈페이지에서 Animate.css 이 몇 글자의 색깔이 천천히 변하는 것을 발견했는데 개인적으로 재미있었어요. animate변경color인 줄 알았는데 결과F12 이상한 css 속성이 많이 발견됐어요.
일단 저의 실현 방법을 보도록 하겠습니다.
간편한 실현 방법

h2{
    height: 60px;
    color: #f35626;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        color: #f35626;
    }
    to {
        color: #feab3a;
    }
}

css3의 애니메이션 속성을 통해 문자의 색깔을 쉽게 바꿀 수 있지만 여기에 작은 문제가 하나 있다. 바로 애니메이션이 한 라운드가 끝난 후에 색깔에 뚜렷한 변화 과정이 있다는 것이다.애니메이션이 끝난 후 마지막 프레임의 색깔이 #feab3a이기 때문에 바로 애니메이션을 다시 실행할 것이다. 색깔은 첫 번째 프레임#f35626으로 시작하기 때문에 뚜렷한 변화가 있을 것이다.우리 애니메이션의 작법을 좀 바꾸자.

@-webkit-keyframes hue {
    0%{
        color: #f35626;
    }
    50% {
        color: #feab3a;
    }
    100%{
        color: #f35626;
    }
}

이렇게 하면 시작과 끝이 모두 같은 색이어서 애니메이션 윤회 색깔이 돌변하지 않을 것이다.
Animate.css 쓰기
먼저 Animate의 작법을 보아라

h2{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

linear-gradient 선형의 점차적인 변화는 예전에 사용한 적이 있지만 background-clip,text-fill-color,-webkit-filter: hue-rotate 이런 속성은 낯설다. 관련 자료를 찾아보고 나서야 이런 속성을 알게 된다. 다음은 이런 속성을 알아보자.

background-clip

text-fill-color

filter: hue-rotate

background-clip
CSS 3 속성 지정 배경의 그리기 영역 W3school 위에 세 개의 값 CSS 3 background-clip 속성만 표시됩니다.

border-box       #          。
padding-box       #           。
content-box       #          。

위에서 사용한 -webkit-background-clip: text;는 반드시 -webkit- 접두사를 붙여야 한다. 그렇지 않으면 브라우저가 정상적으로 렌더링할 수 없다.text의 효과는 배경 색상이 텍스트 위로 잘리고 텍스트에만 배경 색상이 표시되는 것입니다.이 속성은 ktv 안의 가사 보기와 유사한 효과를 낼 수 있다.구체적인 효과는 날카로운 백그라운드-clip:text를 참고하여 K노래 자막 효과를 실현한다
text-fill-color
text-fill-color, 텍스트 색상이 채워진 것을 나타냅니다. 실현된 효과는 기본적으로 color와 같습니다. color가 정의한 글꼴 색상을 덮어씁니다.투명 채우기 속성transparent도 지원됩니다.
filter: hue-rotate
hue-rotate는 객체의 색상 회전을 설정하는 데 사용됩니다.0-360 숫자로 표현하겠습니다.
상기 세 가지 속성을 애니메이션과 결합시켜 최종적으로 문자의 점차적인 효과를 실현한다.
투명도 그래디언트

.maskImage {
  color: red;
  height: 600px;
  //background: black;
  -webkit-mask-image: -webkit-gradient(linear,center top,center bottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000));
  }

총결산
CSS3에 대한 이해가 높아짐에 따라 CSS3의 잠재력이 점점 커지고 css3와 결합하면 다양한 시크한 효과를 쉽게 실현할 수 있음을 깊이 느꼈다.물론 이 큰 문제다.