애니메이션

htmlcss원리span으로 긴 가로선을 만들고 li로 점을 만들어 배치한다.가상요소 before를 이용하여 동일한 점을 absolute 속성으로 만든다.애니메이션시에 확대되는 효과의 기준점을 중심으로 맞추기 위해 top,left에 네거티브 마진으로 크기의 절반값을 준

커서가 닿았을 때만 움직이는 애니메이션htmlcss아이디어1\. 원을 제외한 부분은 box-shadow를 크게 만들어 가리고 넘치는 영역은 hidden처리한다2\. keyframes을 이용해 애니메이션을 적용시킨다.3\. animation-play-state속성으로 애

htmlcss원리이미지 태그 위에 mask 선 4개를 간격을 두어 만든다.mask애니메이션을 시간차로 실행한다.mask애니메이션은 mask를 나눠진 구역만큼 가리다가 원래 너비로 돌아온다.마지막으로 이미지의 사이즈를 줄이는 애니메이션을 실행한다.

css원리가상요소를 주어 너비를 0%로 주고 호버나 포커스시 100%로 늘린다

Tap 컴포넌트를 relative로 둔다span 태그로 흰색 줄을 만든 뒤 position을 absolute로 하고 z-index을 낮춘다div 태그로 모양을 만든 뒤 margin을 주어 적절한 곳에 배치한다.hover옵션으로 0.6초에 걸쳐 x축 방향으로 30px만큼

htmlcssjavascriptsetInterval시간과 css의 animation시간을 일치시켜주어야 한다.

htmlcssjavascript

htmlcss

스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리어떤 요소가 현재 화면에 보이는 상태인지를 확인할 때 사용htmlcssjavascript적용하고자 하는 div태그에 scroll-spy클래스 설정js설정후 80%지점에서 보여지면 그 요소에는 show라는 클래스가