애니메이션7 CSS | ANIMATION | 마우스를 따라 움직이는 눈 마우스를 따라 움직이는 눈동자 애니메이션👀 마우스와 키보드에 따라 눈동자가 움직이도록 애니메이션을 만들어봅시다 ~! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 요리조리 #2. CSS(SCSS) 코드를 확인해보자 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-sty.. 2022. 9. 26. CSS | ANIMATION | 빙빙 돌아가는 로딩 만들기 2022. 9. 26. CSS | ANIMATION | 늘어났다 줄어났다 반복하는 정육면체 쫘아아악 늘어나는 정육면체 🎲 정육면체가 위아래로 늘었다 줄었다 반복하는 애니메이션을 만들어봅시다요 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 정육면체 면 6개를 만들어줍니다. 코딩하자:9 #2. CSS(SCSS) 코드를 확인해보자 body { background-color: #333; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3.. 2022. 9. 22. CSS | ANIMATION | 위아래로 움직이는 글자 효과 만들기 글자가 올라왔다 내려갔다 반복하는 효과 ⇡⇣ 글자가 '점핑저점핑'하는 효과를 만들어봅시다 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 글자마다 span으로 감싸서 만들어줍니다. I ' m G y u p p #2. CSS(SCSS) 코드를 확인해보자 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, black 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: .. 2022. 9. 22. CSS | ANIMATION | 입체감 있는 마우스 오버효과 입체감 있는 카드 마우스 오버효과🖱 마우스를 올리고 내릴때마다 입체감 있게 돌아가는 마우스 오버 효과 적용 방법을 배워봅시다 ~ See the Pen MouseHoverEffect by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 Right Mouse Hover Effect 마우스 내리면 Left #2. CSS(SCSS) 코드를 확인해보자 body { font-family: 'LocusSangsang'; background-image: linear-gradient(135deg, #191970 0%, .. 2022. 9. 20. ANIMATION | SVG 애니메이션 소개 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, el.. 2022. 9. 8. CSS | 통통 돌아다니는 공 만들기 통토도동 돌아다니는 공 🏐 codepen을 사용해서 통통 튕기며 돌아다니는 공을 만들어 봅시다. 첫번째 공이 먼저 가고 뒤따라 연속적으로 가는 것처럼 만들어보았습니다만.. 속도를 빠르게 하니 그냥 공이네요^^! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 * { box-sizing: border-box; } body { background: linear-gradient(to top, blueviolet 0%, pink 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: cent.. 2022. 9. 4. 이전 1 다음
