애니메이션11 애니메이션 만들기 09 애니메이션 09 애니메이션 만들기 아홉번째 시간입니다. 오늘은 좀 복잡한 코드가 들어간 애니메이션을 만들어보겠습니다. 사진의 눈동자가 마우스를 따라서 움직입니다. 01. HTML { 안녕 } 02. 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; } .me { position: absolute; width: 369px; h.. 2022. 9. 26. 간단한 애니메이션 08 간단한 애니메이션 08 간단한 애니메이션 만들기 여덟번째 시간입니다. 뱅글뱅글 돌아가는 로딩 애니메이션을 만들어보겠습니다. 01. HTML { } 02. CSS { body { background-color: rgb(105,54,199); } .loader { position: absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; a.. 2022. 9. 25. 간단한 애니메이션 07 간단한 애니메이션 07 간단한 애니메이션 만들기 일곱번째 시간입니다. 회전하면서 길쭉하게 늘어났다가 줄어드는 상자를 만들어보겠습니다. 01. HTML { 코딩대원 } 02. CSS { body { background-color: #0B2C81; 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); animation: rotat.. 2022. 9. 22. 간단한 애니메이션 06 간단한 애니메이션 06 간단한 애니메이션 만들기 여섯번째 시간입니다. 팔딱팔딱 뛰는 글자를 만들어보겠습니다. 01. HTML { w e b s t o r y a } 02. CSS { html,body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 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. 21. 간단한 애니메이션 05 간단한 애니메이션 05 간단한 애니메이션 만들기 다섯번째 시간입니다. 수업시간에 배운 마우스오버 효과를 이용해서 예제를 만들어보겠습니다. 01. HTML { Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Left Mouse Hover Effect 마우스 내리면 to Right } 02. 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. 간단한 애니메이션 04 간단한 애니메이션 04 간단한 애니메이션 만들기 네번째 시간입니다. 웨이브 애니메이션을 만들어보겠습니다. 01. HTML Pug를 컴파일시켰습니다. 너무 길어서 접어놓겠습니다. 결과보기 { } 02. CSS SCSS를 컴파일 시켰습니다. { body { display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient(45deg, #00DBDE 0%, #FC00FF 100%); } .row { display: flex; } .row .circle { width: 10px; height: 10px; border-radius: 50%; margin: 5px 10px; backgr.. 2022. 9. 19. 애니메이션 속성 정리 / 예제 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 애니메.. 2022. 9. 8. SVG 텍스트 애니메이션 SVG 텍스트 애니메이션 SVG 텍스트에 stroke효과와 애니메이션 효과를 입혀서 예쁘게 만들어보겠습니다. 01. HTML { kimdaewonn } 02. CSS { @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.w.. 2022. 9. 8. 간단한 애니메이션 03 간단한 애니메이션 03 간단한 애니메이션 만들기 세번째 시간입니다. 잔상을 남기며 통통 튀는 공을 만들어보겠습니다. 01. HTML { } 02. 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>.. 2022. 9. 2. 간단한 애니메이션 02 간단한 애니메이션 02 간단한 애니메이션 만들기 두번째 시간입니다. 빙글빙글 돌아가는 조그만 두개의 공을 만들어보겠습니다. 01. HTML { } 02. CSS { body { height: 100vh; background-image: linear-gradient(-60deg, #ff5850 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; background: transparent; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-.. 2022. 8. 29. 간단한 애니메이션 01 간단한 애니메이션 01 간단한 애니메이션 만들기 첫번째 시간입니다. 둥근모서리의 굴러가는 사각형을 만들어보겠습니다. 01. HTML { } 02. 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-radi.. 2022. 8. 29. 이전 1 다음
