[CSS] jpg파일로 움직이는 텍스트 애니메이션(text animation) 만들기
오늘은 텍스트 배경색이 움직이는 효과를 만들어보겠습니다. 사용할 이미지는 gif 처럼 동적인 파일이 아닌 jpg 파일로 스트라이프 패턴의 이미지를 사용할 건데요. stripe, stripe background 등으로 검색하시면 비슷한 이미지를 찾으실 수 있을 거예요😀 여기서 유의할 점은 스트라이프 패턴이 세로로 되어 있는 게 아닌 위와 같이 사선으로 되어 있어야 한다는 점입니다. 만약 세로 패턴의 이미지라면 각도를 돌려 사용하면 되겠네요! 먼저 완성 소스를 보여드리겠습니다. 여기서 중요한 태그는 background-clip, @keyframes, animation 정도가 되겠네요! background-clip 요소의 배경을 어디까지 차지할 지 지정하는 속성으로 아래와 같은 값을 지정할 수 있습니다. bo..
2021.05.22