CSS/애니메이션9 애니메이션 08 애니메이션 08 눈 굴리는 애니메이션을 만들어보자..... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. script 코드 const wrap = document.querySelector('.wrapper'); const eye = document.querySelector('.eye'); const speed = 1; // 0 ~ 1사이 let x = 0; // translate할 거리 let y = 0; let followX = 0; // 마우스 움직인 거리 let followY = 0; function animate() { x += (followX - x) * speed; y += (followY - y) * speed; eye.style.trans.. 2022. 9. 29. 애니메이션 07 애니메이션 07 돌면서 늘어나는 상자를 만들어보자... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML 코딩 CSS 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-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotate 8000ms.. 2022. 9. 22. 애니메이션 06 애니메이션 06 움직이는 글자를 만들어보자.... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML w e b s t o r y a CSS @font-face { font-family: 'LeeSeoyun'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/heungkuk/LeeSeoyun.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/heungkuk/LeeSeoyun.eot?#iefix') format('embedded-opentype'), url('https://cdn.js.. 2022. 9. 22. 애니메이션 05 애니메이션 05 위, 우측으로 움직이는 애니메이션을 만들어 보자! See the Pen MouseHoverEffect by 이유나 (@fkdldhs8484) on CodePen. 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.e.. 2022. 9. 20. 애니메이션 04 애니메이션 04 흔들거리는 애니메이션을 만들어보자... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML div.circle-wrap - for (var x =1; x 2022. 9. 20. SVG 텍스트 애니메이션 SVG SVG는 Scalable Vector Graphics라는 뜻인데, 번역하자면 확장가능한 벡터 그래픽이다. 픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. 그러다보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식입니다. HTML 마이쮸체 CSS @font-face { font-family: 'CrownMychew'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontw.. 2022. 9. 8. 애니메이션03 애니메이션 03 회전하면서 도는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> CSS * { box-sizing: .. 2022. 9. 3. 애니메이션 02 애니메이션 02 돌고 도는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="loading"> <span class="circle1"></span> <span class="circle2"></span> </div> CSS body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 0.5s ease 10.. 2022. 8. 29. 애니메이션 01 애니메이션 01 퉁퉁 튀는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="box"></div> CSS body { height: 100vh; background-image: linear-gradient(to top, purple, purple) } .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: abso.. 2022. 8. 29. 이전 1 다음
