CSS/ANIMATION12 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 코드를 확인해보자 글자마다 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. CSS | ANIMATION | 울렁울렁 웨이브 만들기 울렁울렁 웨이브 애니메이션 만들기 ➰ 원 형태의 여러 점에 스핀 효과와 스케일 효과를 적용하여 웨이브처럼 보이게 만들어 보았습니다. 이번엔 Pug와 SCSS를 활용해서 만들었으니 참고해주세요 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML(Pug) 코드를 확인해보자 div.circle-wrap - for (var x =1; x 2022. 9. 19. 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 | CSS 애니메이션 만들기 CSS ANIMATION 걸어다니는 하트 만들기 border-radius Start Stop + 먼저 연속되는 이미지를 이어 붙여 하나의 이미지로 저장합니다. Start Stop + 움직이는 애니메이션은 .stepbox에서 만들어주었습니다. .step { height: 700px; background: #351371; position: relative; border-radius: 0 0 10px 10px; } .step .stepbox { width: 800px; height: 600px; background: url(https://kkb75281.github.io/coding2/animation/img/hwalking.jpg); border-radius: 0; position: absolute; lef.. 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. 이전 1 다음
