CSS에서 text-shadow 속성에 애니메이션을 적용하면 텍스트 그림이 부드럽게 움직이는 시각적 효과를 만들 수 있습니다. 이 속성은 @keyframes 규칙과 함께 사용하여 그림의 위치, 흐림 정도(blur), 색상을 자유롭게 변화시킬 수 있습니다.
text-shadow 애니메이션 예제
아래 코드는 animation 속성으로 3초 동안 무한 반복되는 애니메이션을 설정하고, @keyframes를 통해 진행률 30% 지점에서 파란색 텍스트 그림자가 나타나도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
background-color: orange;
border: 2px solid blue;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
text-shadow: 10px 20px 30px blue;
}
}
</style>
</head>
<body>
<h1>CSS text-shadow 속성</h1>
<div>
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
This is demo text.
</div>
</body>
</html>코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 3초 동안 실행하며, 무한히 반복합니다.
- @keyframes myanim — 애니메이션의 중간 상태를 정의합니다. 여기서는 30% 지점에서 스타일이 변경됩니다.
- text-shadow: 10px 20px 30px blue; — 가로 오프셋 10px, 세로 오프셋 20px, 흐림 반경 30px, 색상은 파란색으로 그림자를 지정합니다.
브라우저에서 위 코드를 실행하면 주황색 배경의 div 영역 안에 있는 텍스트에 파란색 그림자가 나타났다가 사라지는 애니메이션이 반복되는 것을 확인할 수 있습니다.