CSS에서 text-decoration-color 속성에 애니메이션을 적용하면, 텍스트 밑줄의 색상이 일정한 흐름에 따라 부드럽게 변하는 동적인 효과를 만들 수 있습니다. @keyframes 규칙과 함께 이 속성을 활용하면 눈길을 끄는 인터랙티브한 웹 페이지를 손쉽게 구현할 수 있습니다. 아래 예제 코드를 직접 실행해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: absolute;
right: 0;
width: 300px;
height: 200px;
background-color: blue;
text-decoration: underline;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
right: 350px;
text-decoration-color: orange;
}
}
</style>
</head>
<body>
<h1>CSS text-decoration-color 속성</h1>
<div id = "demo">
<h1>데모 텍스트입니다.</h1>
</div>
</body>
</html>
코드 설명
- #demo 선택자: 해당 요소를 화면 오른쪽에 절대 위치(position: absolute)로 배치하고, 너비 300px, 높이 200px, 파란색 배경을 지정합니다. 또한
text-decoration: underline으로 텍스트에 밑줄을 추가합니다. - animation 속성:
myanim이라는 이름의 애니메이션을 3초 동안 무한 반복(infinite)하도록 설정합니다. - @keyframes myanim: 애니메이션이 30% 진행된 시점에 요소를 오른쪽으로 350px 이동시키고, 동시에 밑줄 색상을 주황색(orange)으로 변경합니다.
이처럼 text-decoration-color 속성은 @keyframes와 결합하면 단순한 정적 스타일을 넘어, 색상이 살아 움직이는 듯한 시각적 효과를 구현할 수 있습니다. 다양한 색상 값과 애니메이션 타이밍을 조합해 여러분만의 독창적인 디자인을 시도해 보세요.