ANIMATION13 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 ANIMATION SVG 텍스트 애니메이션 만들기 svg Gyupp Gyupp @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/t.. 2022. 9. 8. 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. ANIMATION | CSS 애니메이션 소개 animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state ; 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션.. 2022. 9. 7. 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. CSS | 돌아가는 로딩 표시 만들기 돌아가는 로딩 표시를 만들어 보자 ! codepen을 사용해서 돌아가는 로딩 표시를 만들어 봅시다. 아래 코드를 참고하셔서 직접 만들어 보세요 :D See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, blue 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } .loading .circle1 .. 2022. 8. 29. CSS | 굴러가는 네모 만들기 굴러가는 네모를 만들어 보자 ! codepen을 사용해서 굴러가는 네모를 만들어 봅시다. 아래 코드를 참고하셔서 직접 만들어 보세요 :D See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 body { height: 100vh; background-image: linear-gradient(to top, white, pink) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px;.. 2022. 8. 29. JAVASCRIPT | GSAP 🤔 GSAP, 그게 뭔데? GSAP_The GreenSock Animation Platform; CSS나 jQuery등을 사용해 애니메이션 효과를 구현하는데 있어 번거로움과 복잡함을 GSAP를 통해 훨씬 간편하게 설정이 가능합니다. 세세한 부분까지 설정이 가능하며 라이브러리 참고가 가능하여 여러 웹사이트에서 사용하고 있습니다. 🤓 GSAP, 사용해볼까? 위의 사진처럼 공식 사이트에서 설치하거나 CDN을 통해 사용할 수 있습니다. 📄 SLIDER 효과_좌로 움직이는 이미지를 통해 확인해보자 ! 2022. 8. 29. CSS | 움직이는 강아지 만들기 🐶 꼬까옷 입은 강아지 같이 만들어 보자 ! pug, scss, animation을 사용해서 움직이는 강아지를 만들어 봅시다. 아래 코드를 참고하셔서 각자 자신만의 강아지를 만들어 보세요 :) See the Pen CSS Dog by kkb75281 (@kkb75281) on CodePen. #1. HTML_pug 코드를 확인해보자 .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue #2. CSS_scss 코드.. 2022. 8. 18. 이전 1 다음
