CSS/애니메이션11 CSS 애니메이션 : 움직이는 눈알 (+ javascript) 애니메이션 만들기 javascript 애니메이션을 만들어 봅니다! 애니메이션 : 움직이는 눈알 눈이 마우스 커서를 따라 움직이는 효과입니다. html 코드 보기 ABCDE css 코드 보기 * { 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-style: preserve-3d; perspective: 600px; } .me { position: absolute;.. 2022. 9. 26. CSS 애니메이션 : 원이 돌아가는 로딩화면 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 원이 돌아가는 로딩화면 원들이 빙글빙글 돌아가는 로딩화면입니다. html 코드 보기 css 코드 보기 body { background-color: darkcyan; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50% -50%); width: 100px; height: 100px; animation: spin 0.6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50% -50%); height: 100%; animation.. 2022. 9. 26. CSS 애니메이션 : 넘어가는 사진 3D 효과 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 쭉쭉 늘어나는 큐브 큐브에 글씨가 있으며, 빙글빙글 돌아가며 쭉쭉 늘어나는 애니메이션입니다. html 코드 보기 코 딩 척 척 학 사 css 코드 보기 body { background: #0fa599; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); an.. 2022. 9. 22. CSS 애니메이션 : 통통 튀는 글씨 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 통통 튀는 글씨 글씨가 통통 튀는 애니메이션 입니다. html 코드 보기 코 딩 척 척 학 사 css 코드 보기 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, pink 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; color: #fff; position: relative; top: 20px; display: inline-block.. 2022. 9. 22. CSS 애니메이션 : 넘어가는 사진 3D 효과 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 넘어가는 사진 3D 효과 마우스를 올리면 사진이 넘어가는 효과입니다. html 코드 보기 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left css 코드 보기 @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot'); src: .. 2022. 9. 20. CSS 애니메이션 : 꾸물거리는 점 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 꾸물거리는 점 꾸물꾸물 거리는 것처럼 보이는 점을 만듭니다. pug 코드 보기 div.circle_wrap -for (var x =1; x 2022. 9. 19. CSS 애니메이션 : SVG 만들기와 SVG 애니메이션 애니메이션 만들기 svg를 만들고, svg를 이용한 애니메이션을 만들어봅니다! 간단한 형태의 svg 이미지는 코딩으로도 만들 수 있으니, 잘 알아두었다가 활용해봅시다! SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. > SVG의 특징 알아보기 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현.. 2022. 9. 7. CSS 애니메이션 : 속성 알아보기 + 예제 애니메이션 만들기 CSS를 이용한 애니메이션 만들기 방법을 알아봅니다. 애니메이션에 관련된 속성은 정말 많고 값에 따라 다른 애니메이션을 만들 수 있으니, 유형을 잘 알아두었다가 활용해 봅시다! > animation 속성 animation으로 시작하는 속성들은, 움직임을 줄 수 있는 애니메이션 관련 속성입니다. 종류 설명 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. an.. 2022. 9. 7. CSS 애니메이션 : 움직이는 공 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 움직이는 공 잔상이 뒤따르는 움직이는 공 애니메이션을 만들어 봅니다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper:nth-of-t.. 2022. 9. 2. CSS 애니메이션 : 로딩 동그라미 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 로딩 동그라미 빙글빙글 돌아가는 로딩화면 동그라미 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(-60deg, orange 0%, pink 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .load.. 2022. 9. 2. CSS 애니메이션 : 구르는 박스 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 구르는 박스 데굴데굴 구르는 박스 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opa.. 2022. 9. 2. 이전 1 다음 728x90
