범위가 지정된 맞춤 속성과 배경 클립을 사용해 애니메이션 그라데이션 텍스트 효과를 만들어 보겠습니다.
CodePen으로 이동하여 새 펜을 만듭니다.
텍스트에 대한 마크업을 만듭니다. 'Speedy'라는 단어가 포함된 헤더를 사용해 보겠습니다.
<h1 class="boujee-text">Hello!</h1>
그런 다음 body
에 더 어두운 background-color
를 지정해 보겠습니다.
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
텍스트에서 font-size
를 위로 올립니다. clamp
를 사용하여 반응형으로 만듭니다.
.boujee-text {
font-size: clamp(3rem, 25vmin, 8rem);
}
사용할 색상에 두 개의 맞춤 속성을 만듭니다. 이러한 색상을 사용하여 linear-gradient
를 background
에 적용하고 90도 회전합니다.
.boujee-text {
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / 100% 100%;
}
가로 배경 크기에 사용할 수 있는 맞춤 속성을 만듭니다. background-size-x
에 사용합니다.
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
}
배경을 텍스트에 맞게 자르려면 color
를 transparent
로 설정하고 background-clip: text
를 설정합니다.
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
이제 그대로 두고 background-image
에 사용된 background-position
및 그라데이션을 실험해 볼 수 있습니다. 또는 텍스트의 그라데이션에 애니메이션을 적용할 수 있습니다. 먼저 애니메이션의 키프레임을 정의합니다. 앞에서 정의한 --bg-size
맞춤 속성이 사용됩니다. 더 쉽게 유지관리할 수 있게 해주는 범위가 지정된 맞춤 속성의 좋은 예입니다.
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
그런 다음 animation
를 사용하여 애니메이션을 적용합니다.
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: move-bg 8s infinite linear;
}
좀 더 나아가 애니메이션 코드를 미디어 쿼리에 래핑하여 사용자의 모션 기본 설정을 존중할 수 있습니다.
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
완료되었습니다. 🎉 범위가 지정된 맞춤 속성과 background-clip
을 사용하여 CSS로 애니메이션 그라데이션 텍스트를 만들었습니다.
간단한 동영상으로 이러한 팁을 알려 드리겠습니다. ⚡️
트윗 양식에서 선호하시나요? 🐦
멋지게 꾸미지 마세요! •ᴥ•`
히어로 이미지: Vladislav Klapin, Unsplash