Apple 공식사이트 클론코딩을 하면서 텍스트에 그라데이션과 애니메이션을 구현하는 방법에 대해 공부해보았다.
1. HTML 작성하기
<body>
<span>
shoot, view, edit,<br />and share in ProRes<br />or Dolby Vision HDR
</span>
</body>
span 안에 문장이 br로 줄바꿈되는 구조이다.
2. 그라디언트 적용하기
span {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(
180deg,
#ffb6ff,
#b344ff 10%,
#ae38ff 33%,
#ffb6ff 45%,
#ffe3ff 50%,
#ffb6ff 66%,
#b344ff
);
}
background-clip: text;
-webkit-background-clip: text;
color: transparent;배경과 텍스트를 반전시키기 위해서 이 코드가 함께 사용되어야 한다.
background-image: linear-gradient(방향, 색상1 비율, 색상2 비율, 색상3 비율...);그라디언트 색상은 background-image 안에 linear-gradient 함수를 사용한다.
방향은 deg 단위나 turn, 상하좌우로 설정할 수 있다.
색상은 시작 지점부터 끝 지점까지 차례로 나열할 수 있으며, 비율을 지정하여 차지하는 범위를 조절할 수 있다.
3. 그라디언트의 줄바꿈 없애기
span {
display: block;
...
}
span은 inline 태그이기 때문에 줄바꿈 된 문장에 따로 그라디언트가 적용된다.
block으로 바꾸면 통으로 그라디언트가 적용된다.
4. 애니메이션 효과 넣기
span {
...
background-size: 100% 300%;
background-position-y: 0%;
animation: gradient 2s ease-in-out forwards;
}
@keyframes gradient {
from {
background-position-y: 0%;
}
to {
background-position-y: 100%;
}
}
그라디언트를 세로로 늘리고 위치를 아래에서 위로 올리는 방식이다.
텍스트 뒤에서는 이런 일이 발생하는 것이다.
🍀 an evenful day, life, journey
와, 재밌는 트릭이네요. 공유 감사드립니다.