[HTML,CSS] 한 글자 씩 물결치는 효과 만들기

 

이런 식으로 글자들이 파도치는 효과를 본 적이 있을겁니다

만드는 방법은 아주 간단합니다.

 

가장 먼저

이런 식으로 글자 하나하나마다 span으로 감싸줍니다.

<p style="cursor:default;">
	<span>지</span>
	<span>금</span>
	<span>은</span>
	<span> </span>
	<span>코</span>
	<span>딩</span>
	<span>하</span>
	<span>는</span>
	<span> </span>
	<span>중</span>
	<span>.</span>
	<span>.</span>
	<span>.</span>
</p>

.

.

그 다음에는 css에 애니메이션 효과를 넣어주면 되는데

이렇게 넣어주면 정상적으로 글자들이 파도타는 모습을 보실 수가 있습니다!

// ani_text는 원하시는 걸로 작명하시면 됩니다
@keyframes ani_text { 0% { top: 0; } 20% { top: -0.2rem; } 40% { top: 0 } 60% { top: 0 } 80% { top: 0 } 100% { top: 0 } }

p span {
	position: relative;
	animation: ani_text 1.5s infinite;
}
p span:nth-child(1) { animation-delay: 0.1s;}
p span:nth-child(2) { animation-delay: 0.2s;}
p span:nth-child(3) { animation-delay: 0.3s;}
p span:nth-child(4) { animation-delay: 0.4s;}
p span:nth-child(5) { animation-delay: 0.5s;}
p span:nth-child(6) { animation-delay: 0.6s;}
p span:nth-child(7) { animation-delay: 0.7s;}
p span:nth-child(8) { animation-delay: 0.8s;}
p span:nth-child(9) { animation-delay: 0.9s;}
p span:nth-child(10) { animation-delay: 1.0s;}
p span:nth-child(11) { animation-delay: 1.1s;}
p span:nth-child(12) { animation-delay: 1.2s;}
p span:nth-child(13) { animation-delay: 1.3s;}

 

---

오늘도 즐거운 코딩생활 되세요~~