원형 프로그레스바 CSS 9종 — 값만 바꾸면 되는
원형 프로그레스바 CSS는 값 하나만 바꾸면 전체가 다시 그려지는 채움·게이지 애니메이션을 말합니다. 업로드 바부터 반원 속도계, 배터리 아이콘까지 실제로 돌아가는 아홉 개를 모았고, 하나같이 width가 아니라 t
읽기CSS만
기술
CSS 토글 스위치 9종 — 한 줄 복붙으로
CSS 토글 스위치는 <input type="checkbox"> 하나로 실제 켜고 끌 수 있으면서 트랙과 노브의 위치·색·아이콘만 다르게 꾸민 컨트롤입니다. 아홉 가지를 모았고 전부 transform·opacity
CSS 글자 그라데이션 반짝이는 텍스트 9종 — 한 줄 복붙으로
css 글자 그라데이션은 글씨 위에 여러 색을 흘려 넣어 단색 글자보다 시선을 오래 붙잡는 효과입니다. 아홉 개 중 하나(03)는 같은 글자를 뒤에 한 겹 더 깔아 후광만 blur 로 만드는데, 부모에 isolati
CSS 카드 애니메이션 호버 효과 9종 — 한 줄 복붙으로
CSS 카드 애니메이션은 카드 컴포넌트가 마우스나 포커스에 반응해 뜨거나 빛나거나 기울어지는 짧은 시각 변화를 말합니다. 카드 호버 효과 아홉 가지를 한 번에 모았고, 커서 좌표가 필요한 두 개는 JS를 10줄 안팎
채팅 말풍선 CSS 애니메이션 9종 — 한 줄 복붙으로
채팅 말풍선 CSS 애니메이션 아홉 개를 한 번에 모았습니다. 팝 등장부터 입력 중 점, 읽음 표시, 이미지 로딩, 답장 인용, 이모지 반응, 날짜 구분선, 새 메시지 하단 고정까지 메시지 한 통이 화면에서 겪는 순
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 배경 애니메이션은 히어로 섹션이나 카드 뒤에서 이미지 파일 없이 그라데이션·격자·점·노이즈 같은 패턴을 계속 움직이게 만드는 기법입니다. 아홉 개를 모았는데, 그중 하나는 커서를 따라가는 스포트라이트라 마우스