채팅 말풍선 CSS 애니메이션 9종 — 한 줄 복붙으로
채팅 말풍선 CSS 애니메이션 아홉 개를 한 번에 모았습니다. 팝 등장부터 입력 중 점, 읽음 표시, 이미지 로딩, 답장 인용, 이모지 반응, 날짜 구분선, 새 메시지 하단 고정까지 메시지 한 통이 화면에서 겪는 순
읽기SCSS
기술
CSS 순차적 애니메이션 9종 — 복붙되는 스태거 데모
CSS 순차적 애니메이션은 목록이나 격자의 여러 항목이 한꺼번에 움직이지 않고, 정해진 순서에 맞춰 지연 시간을 조금씩 다르게 주어 하나씩 나타나거나 사라지게 만드는 기법입니다. 아홉 개 중 하나(08)는 반복문도
CSS 숫자 증가 애니메이션 9종 — 한 줄 복붙으로
CSS 숫자 증가 애니메이션은 0이나 시작값에서 목표 숫자까지 오르는 텍스트를 CSS 속성 하나로 세는 방식입니다. 아홉 개 중 하나는 거꾸로 세고, 또 하나는 스크롤해서 보이기 전엔 0에서 멈춰 있습니다. 숫자 아
CSS 무한 롤링 배너 9종 — AOS·GSAP 없이, JS 0줄
css 무한 롤링 배너는 로고나 문구를 담은 콘텐츠 줄이 끊김 없이 한 방향으로 계속 흘러가는 애니메이션입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지를 전부 만들었고, 그중 하나(09)는 화면이 아니라 사용
CSS 이미지 호버 효과 9종 — 한 줄 복붙으로
이미지 호버 효과는 마우스를 올리거나 초점을 맞췄을 때 사진이 어떻게 반응하는지 정하는 짧은 전환입니다. 아홉 개 중 하나(07)는 사진 두 장을 겹쳐 원 모양 창을 키워 드러내는데, CSS에는 그 반지름을 끝까지
CSS 배경 애니메이션 9종 — 한 줄 복붙으로
CSS 배경 애니메이션은 히어로 섹션이나 카드 뒤에서 이미지 파일 없이 그라데이션·격자·점·노이즈 같은 패턴을 계속 움직이게 만드는 기법입니다. 아홉 개를 모았는데, 그중 하나는 커서를 따라가는 스포트라이트라 마우스
CSS 텍스트 애니메이션 효과 9종 — 한 줄 복붙으로
CSS 텍스트 애니메이션 효과는 자바스크립트 없이 CSS만으로 제목이나 문구가 움직이며 나타나거나 강조되는 짧은 연출입니다. 아홉 개 전부 transform·opacity·filter 세 가지 속성만 움직이고, 격자
CSS 타이핑 효과 9종 — 한 줄 복붙으로
CSS 타이핑 효과는 자바스크립트 라이브러리 없이 CSS만으로 문장이 한 글자씩 나타나거나 지워지는 것처럼 보이게 만드는 짧은 애니메이션입니다. 아래 아홉 개는 각각 다른 CSS 속성 하나에 기대고 있고, 필요한 건
CSS 마우스 커서 효과 9종 — 한 줄 복붙으로
CSS 마우스 커서 효과는 브라우저 기본 화살표 대신 프로젝트에 맞춘 모양·잔상·블렌드 반응을 붙이는 것을 말합니다. 아홉 개 중 셋은 자석처럼 끌리거나 배경 색을 반전시키는, 흔한 예제 모음에서는 잘 안 보이는 조
CSS 툴팁 말풍선 9종 — 한 줄 복붙으로
CSS 툴팁 말풍선은 버튼이나 아이콘에 커서를 올리거나 포커스를 두었을 때 짧은 설명을 그 옆에 띄우는 작은 말풍선으로, 이 글은 자바스크립트 없이 대부분 순수 CSS로 돌아가는 아홉 가지 방식을 모았습니다. 아홉