[css] 텍스트 안에 그라데이션 배경 움직여보기

기획자에게 축하 메시지가 들어가는 이벤트 기획서가 도착함.

뭔가 경품도 주고 하는 이벤트인데, 그냥 글자만 "축하함"이라고 넣기가 허전해보여서, 뭐가 없을까 하다가...

CSS에 background-clip: text; 속성을 이용해 텍스트 안에 그라데이션 애니를 주기로 함~ 

 

일단 결과물은...

 

 

열심히 해보고나니 나름 느낌이 괜춘 괜춘~~ (레드써...ㄴ )

 

아래 css를 하나씩 살펴보자~

 

 

CSS

@keyframes moveGradientBg{
    to{background-position: 300% 0;}
}

.item-text{
    display: inline-block;
    position: relative;
    background: linear-gradient(90deg, #ff0 0%, #f86 20%, #ff0 30%) 0 0 / 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: evtAni-layer-gift-txt 3s linear 0s infinite forwards;
    animation-direction: reverse;
}

 

① background	배경에 그라디언트 줌
② background-clip	배경에 그라디언트 주기
③ color	폰트컬러는 투명하게~
④ animation	배경 움직이는 것은 background-position을 이용
⑤ animation-direction	움직이는 방향 설정

 

 

 

background-clip

background-clip - CSS: Cascading Style Sheets | MDN

 

 

자세한 background-clip 속성은 mdn사이트를 참고해보자! 

 

알아봤으니, 다음 주부터 열심히... ㅋㅋ