CSS 사이드바 드로어 슬라이드 9종 — JS 최소로
CSS 사이드바 드로어는 화면 가장자리에 붙어 있다가 트리거를 누르면 패널이 나타나는 내비게이션 UI로, 여기서는 transform과 opacity만으로 아홉 가지 여는 방식을 만들었습니다. 왼쪽에서 미끄러져 들어오
읽기CSS 애니메이션
복붙하면 돌아가는 CSS·SCSS 애니메이션. 주제마다 9종씩
웹 토스트 알림 CSS 애니메이션 9종 — JS 없이, CSS만으로
웹 토스트 알림은 화면 한쪽에 잠깐 떴다가 스스로 사라지는 작은 알림 카드로, 사용자가 지금 보던 화면을 벗어나지 않아도 결과를 알 수 있게 해 줍니다. 슬라이드로 들어오는 것부터 스와이프로 미는 것, 진행바가 다
CSS 프로그레스바 애니메이션 9종 — 스크롤 읽기 진행 표시
CSS 프로그레스바 애니메이션은 지금까지 얼마나 읽었는지를 스크롤 위치만으로 계산해 보여주는 장치입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지 형태를 모았습니다 — 상단 바, 원형 배지, 점 내비, 세로 바
CSS 텍스트 강조 애니메이션 9종 — 한 줄 복붙으로
CSS 텍스트 강조 애니메이션은 본문 속 한 단어나 문장에 형광펜·밑줄·취소선 같은 시각 효과를 얹어 읽는 사람의 시선을 그 자리에 멈추게 하는 기법입니다. 아홉 가지를 모았고, 전부 자바스크립트 없이 순수 CSS
Tailwind 애니메이션 유틸 9종(v4) — 한 줄 복붙으로
Tailwind 애니메이션은 tailwind.config.js가 아니라 CSS 파일 안 @theme 블록에 --animate- 변수와 @keyframes를 같이 적어서 만드는 Tailwind v4의 새 방식입니다.
CSS 배경 애니메이션 효과 모음 9종 — 한 줄 복붙으로
CSS 배경 애니메이션 효과 모음은 눈·별·비·컨페티·거품·반딧불이·꽃잎·안개처럼 작은 조각 여러 개를 화면에 흩뿌려 각자 다른 자리에서 계속 움직이게 만드는 CSS 기법입니다. span 하나를 nth-child로
CSS 3D 큐브 캐러셀 틸트 9종 — 한 줄 복붙으로
css 3d 큐브 회전, 원형으로 도는 캐러셀, 커서를 올리면 기우는 카드까지 — perspective 와 preserve-3d 로만 만든 입체 CSS 효과 아홉 개를 모았습니다. 아홉 개 전부 transform 만
CSS 아이콘 애니메이션 9종 — SVG 로고도 한 줄 복붙으로
CSS 아이콘 애니메이션은 재생·알림·새로고침처럼 화면에 흔한 인터페이스 아이콘을 인라인 SVG로 그려 움직이게 만드는 것이다. 문자 글리프 대신 좌표가 있는 path를 쓰므로 서체가 바뀌어도 모양이 깨지지 않는다.
CSS 입력창 검색창 포커스 애니메이션 9종 — 한 줄 복붙으로
CSS 입력창 애니메이션은 클릭하기 전·클릭한 순간·값을 다 채운 뒤까지 브라우저가 이미 쥐고 있는 :focus :focus-within :placeholder-shown :valid :invalid 상태를 그대로
CSS 키프레임 애니메이션 9종 — 한 줄 복붙으로
CSS 키프레임 애니메이션은 @keyframes로 만든 움직임을 클래스 하나에 담아 어떤 요소에든 그대로 붙여 쓰는 방식입니다. 뜨기·튀기·돌기·펄스·흔들기·비틀기·깜빡임·심장박동·젤리, 아홉 가지를 한 번에 모았고