CSS 입력창 검색창 포커스 애니메이션 9종 — 한 줄 복붙으로
CSS 입력창 애니메이션은 클릭하기 전·클릭한 순간·값을 다 채운 뒤까지 브라우저가 이미 쥐고 있는 :focus :focus-within :placeholder-shown :valid :invalid 상태를 그대로
읽기SCSS
기술
CSS 키프레임 애니메이션 9종 — 한 줄 복붙으로
CSS 키프레임 애니메이션은 @keyframes로 만든 움직임을 클래스 하나에 담아 어떤 요소에든 그대로 붙여 쓰는 방식입니다. 뜨기·튀기·돌기·펄스·흔들기·비틀기·깜빡임·심장박동·젤리, 아홉 가지를 한 번에 모았고
CSS 테두리 애니메이션 9종 — 한 줄 복붙으로
CSS 테두리 애니메이션은 카드나 입력창의 가장자리를 움직여 지금 상태를 알리는 기법입니다. 아홉 개를 한 번에 모았고, 대각선 줄무늬가 흐르는 것부터 SVG로 그려지는 것, 필터로 색이 순환하는 것까지 전부 다른
CSS 버튼 눌림 효과 9종 — 한 줄 복붙으로
CSS 버튼 눌림 효과는 사용자가 버튼·카드·링크를 클릭하거나 터치했을 때 화면이 짧게 반응해 입력이 실제로 먹혔다는 걸 확인시켜 주는 시각적 신호를 말합니다. 아홉 개 중 네 개는 @media (pointer: c
CSS 하트 애니메이션 좋아요·별점 9종 — 한 줄 복붙으로
CSS 하트 애니메이션 아홉 개를 한 번에 모았습니다. 좋아요 버튼의 하트부터 별점 입력, 박수·이모지 리액션까지 누르고 고르는 순간 화면이 확실히 반응하는 장면만 골랐고, 전부 transform과 opacity만
CSS 체크박스 커스텀 라디오 애니메이션 9종 — 한 줄 복붙으로
CSS 체크박스 커스텀은 브라우저 기본 네모난 체크박스·동그란 라디오의 <input> 은 지우지 않고 그대로 둔 채, 옆에 놓은 도형만 :checked 하나로 다시 그리는 방법입니다. 아홉 개를 모았고, 그중 하나는
원형 프로그레스바 CSS 9종 — 값만 바꾸면 되는
원형 프로그레스바 CSS는 값 하나만 바꾸면 전체가 다시 그려지는 채움·게이지 애니메이션을 말합니다. 업로드 바부터 반원 속도계, 배터리 아이콘까지 실제로 돌아가는 아홉 개를 모았고, 하나같이 width가 아니라 t
CSS 토글 스위치 9종 — 한 줄 복붙으로
CSS 토글 스위치는 <input type="checkbox"> 하나로 실제 켜고 끌 수 있으면서 트랙과 노브의 위치·색·아이콘만 다르게 꾸민 컨트롤입니다. 아홉 가지를 모았고 전부 transform·opacity
CSS 글자 그라데이션 반짝이는 텍스트 9종 — 한 줄 복붙으로
css 글자 그라데이션은 글씨 위에 여러 색을 흘려 넣어 단색 글자보다 시선을 오래 붙잡는 효과입니다. 아홉 개 중 하나(03)는 같은 글자를 뒤에 한 겹 더 깔아 후광만 blur 로 만드는데, 부모에 isolati
CSS 카드 애니메이션 호버 효과 9종 — 한 줄 복붙으로
CSS 카드 애니메이션은 카드 컴포넌트가 마우스나 포커스에 반응해 뜨거나 빛나거나 기울어지는 짧은 시각 변화를 말합니다. 카드 호버 효과 아홉 가지를 한 번에 모았고, 커서 좌표가 필요한 두 개는 JS를 10줄 안팎