본문 바로가기
CSS

움직이는 텍스트 애니메이션

by 코딩달림 2022. 9. 26.
728x90

글자 애니메이션

CSS를 사용해 각각 통통 튕기는 글자를 만드는 애니메이션 효과 입니다.

font-smoothing

-webkit-font-smoothing: antialiased
폰트를 부드럽게 만들어주는 속성입니다. 아직 공식적으로 지원하는 기능이 아니라 -webkit-이 붙어있습니다.

text-shadow

text-shadow: offset-x offset-y blur-radius color
폰트에 그림자를 넣어주는 효과입니다. 뒤의 숫자는 각각 그림자의 x축 위치, y축 위치를 나타내며 그 뒤엔 그림자의 선명도와 색깔을 지정할 수 있습니다.

이번 애니메이션은 어려운건 없고 각각의 그림자의 애니메이션에 딜레이를 줘서 계속 움직이디록 하면 끝이 납니다.

'CSS' 카테고리의 다른 글

이미지 호버 애니메이션  (0) 2022.09.26
텍스트 테두리 애니메이션  (1) 2022.09.26
다수 원 회전 애니메이션  (1) 2022.09.26
CSS Animation 2  (4) 2022.09.08
css animation 1  (7) 2022.09.07

댓글


광고 준비중입니다.