CSS 카드 뒤집기 애니메이션 9종 (복붙 20줄)
CSS 카드 뒤집기는 마우스를 올리거나 클릭했을 때 카드가 휙 돌아가거나 반으로 접히면서 반대쪽 내용을 보여주는 애니메이션입니다. 코드를 몰라도 아래 데모에 마우스를 올려보면 바로 무슨 효과인지 알 수 있습니다. 이
읽기CSS 애니메이션
복붙하면 돌아가는 CSS·SCSS 애니메이션. 주제마다 9종씩
CSS 슬라이더로 만드는 캐러셀 9가지 — 복붙 코드
CSS 슬라이더는 사진이나 카드 여러 장이 화면 안에서 옆으로 또는 위아래로 순서대로 넘어가며 보이게 하는 화면 부품입니다. 스크롤부터 라디오 트릭까지, 자바스크립트 없이 CSS만으로 만드는 아홉 가지 방식을 그대로
CSS 밑줄 애니메이션 9종 — 한 줄 복붙으로
css 밑줄 애니메이션은 마우스를 올리거나 키보드로 초점을 옮겼을 때만 링크 아래 줄이 움직이며 나타나는 효과로, 지금 가리키고 있는 링크가 어디인지 눈으로 바로 알려줍니다. 아홉 가지를 모았고 전부 한 줄 복붙으로
위로가기 버튼 CSS 애니메이션 9종 — 스크롤하면 나타나는
위로가기 버튼은 스크롤로 한참 내려간 화면에서 다시 맨 위로 데려다주는 작은 버튼입니다. AOS·GSAP 없이, JS 0줄로 되는 것부터 스크롤 위치를 직접 읽는 것까지 아홉 가지를 모았고, 그중 하나는 애니메이션
CSS 화살표 애니메이션 9종
화살표 아이콘이 저절로 움직이는 웹사이트를 본 적 있으신가요? 마우스를 올리면 화살표가 길어지거나, 버튼을 눌러 보라는 듯 통통 튀거나 — 이런 작은 움직임 하나가 방문자의 시선을 붙잡아 줍니다. 이 글은 그런 CS
CSS 통통 튀는 애니메이션 9종 — 한 줄 복붙으로
CSS 통통 튀는 애니메이션은 요소를 그냥 나타나게 하지 않고 뜨고, 튕기고, 떨고, 흔들리게 만들어 살아 있는 느낌을 주는 움직임입니다. 흔한 영어 이름 대신 둥실둥실·포용·푸루푸루 같은 의성어로 아홉 개를 골랐고
컨페티 효과 축하 애니메이션 CSS 9종
회원가입이나 결제가 끝난 순간 화면에 색종이 조각이 잠깐 터지는 컨페티 효과, 다들 한 번은 보셨을 겁니다. 버튼 클릭이나 체크 표시 하나로 이런 축하 반응을 켜는 CSS 아홉 가지를 한 줄 복붙으로 쓸 수 있게 모
CSS 글래스모피즘 리퀴드 글래스 효과 9종
화면 위에 반투명한 유리판을 얹어 놓은 것처럼, 뒤 배경이 흐릿하게 비치면서 내용은 또렷하게 보이는 디자인을 CSS 글래스모피즘(리퀴드 글래스)이라고 부릅니다. 카드부터 내비게이션, 버튼, 토글까지 아홉 가지 유리
AI 채팅 CSS 로딩 애니메이션 9종
ChatGPT나 Claude 같은 AI 채팅창에서 답이 오기를 기다릴 때 뜨는 점 세 개, 깜빡이는 커서, 서서히 나타나는 글자는 전부 CSS 로딩 애니메이션입니다. div 하나로 끝나는 아홉 가지를 코드와 함께 모
CSS 이미지 슬라이드 애니메이션 9종
사진 위에 마우스를 올리면 커튼처럼 열리거나 원이 점점 커지며 드러나는 걸 본 적 있으신가요? 이런 CSS 이미지 슬라이드 애니메이션을 한 줄 복붙으로 쓸 수 있게 아홉 가지로 모았고, 그중 하나는 자바스크립트 없이