텍스트 애니메이션을 적용한 간단한 HTML 코드를 제공합니다.
이 코드는 텍스트를 슬라이딩하면서 나타나게 하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>텍스트 애니메이션</title>
<style>
/* 텍스트 애니메이션 스타일 */
.text-container {
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.sliding-text {
position: absolute;
animation: slide 3s linear infinite;
}
@keyframes slide {
0% { left: -200px; }
100% { left: 100%; }
}
</style>
</head>
<body>
<h1>텍스트 애니메이션</h1>
<!-- 텍스트 애니메이션 컨테이너 -->
<div class="text-container">
<div class="sliding-text">애니메이션 텍스트</div>
</div>
</body>
</html>
위 코드에서는 .text-container 클래스로 슬라이딩 애니메이션을 갖는 텍스트를 감싸고, .sliding-text 클래스를 가진 텍스트를 애니메이션으로 이동시킵니다.
결과 보기
