텍스트 커서 애니메이션

 안녕하세요 ㅎㅎ

벌써 봄이 오는가 봅니다...

점심먹고 나른나른 잠이와서 끄적여봐요

출처 : 자비스 (https://jobis.co/)

자비스에서 텍스트의 커서가 깜빡깜빡이는 효과가 있죠.

이 커서가 깜빡이는 기능을 구현하려고 해요.

바로 순수 CSS를 써서요.

CSS에서 제공하는 animation을 사용하면 됩니다.

animation : 이름 지속시간 효과;

이름에는 변수명과 같이 들어갑니다.

@keyframes cursor {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
span:after { content: ''; animation : cursor .7s infinite; }

이렇게 만들어주세요.

cursor는 변수로 생각하시고 설정해주시면 되요.

span:after는 구글링 !

@keyframes는 다른 브라우저 지원도 가능하도록 설정해주세요.