팀 과제 프로젝트를 진행하던 중 CSS로 텍스트에 그라데이션 적용하는것을 나중에도 활용할 수 있기 위해 이 글을 작성한다.

HTML

<div class="header">
				<p class="p1">FIND</p>
				<p class="p2">YOUR</p>
				<p class="p3">MOVIE.</p>
</div>

간단한 HTML div를 만들어준다.

CSS

.header {
	width: 100%;
	height: 700px;
	text-align: center;
	font-size: 100px;
	font-weight: 800;
	background: linear-gradient(
		135deg,
		rgba(171, 220, 255, 1) 0%,
		rgba(137, 252, 215, 1) 25%,
		rgba(246, 110, 162, 1) 50%,
		rgba(75, 210, 250, 1) 75%,
		rgba(0, 173, 242, 1) 100%
	);
	background-size: 200%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: ani 10s linear infinite;
}

@keyframes ani {
	to {
		background-position: 400%;
	}
}

.p1 {
	margin-right: 150px;
}
.p2 {
	margin-left: 50px;
}
.p3 {
	margin-left: 300px;
}

background : linear-gradient

우선 텍스트에 그라데이션을 적용하기 위해 background : linear-gradient를 해준다.
여기서 중요한점은 linear-gradient를 background로 넣었을 때, 이미지로 들어간다,

background-clip

background-clip 속성은 배경을 어디에 넣을지 정하는 속성이다.
background-clip을 text에만 적용하여 배경을 text에만 넣는다.
크롬의 경우 -webkit- 벤더 프리픽스를 넣어주어야 정상 동작한다.

background-text-fill

background-text-fill 속성은 글자 색상을 표시하는 속성이다.
이 코드는 비표준이라 color로 사용해도 된다.
마찬가지로 벤더 프리픽스를 붙여 주어야 한다.

animation

animation 속성은 css스타일을 다른 css 스타일로 부드럽게 적용해준다.
즉, transition보다 더 크고 복잡하여 정밀한 효과를 구현할 수 있는 속성이다.
animation의 경우 keyframes가 필요하다.

animation-name 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.

animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.

animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.

animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.

animation-iteration-count 애니메이션이 몇 번 반복될지 지정한다. infinite 로 지정하여 무한히 반복할 수 있다.

animation-play-state 애니메이션을 멈추거나 다시 시작할 수 있다.

animation-timing-function 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.

animation-fill-mode 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.

속성은 각각 위 순서로 적용되지만, 하나씩 생략이 가능하다.