CSS/Animation11 css애니메이션 - 다보고있다~ 애니메이션 : 다보고있다~ See the Pen cssani8 by hmm365 (@hmm365) on CodePen. 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; width: 369px; height: 547px; tran.. 2022. 9. 27. css애니메이션 - 로딩중~ 애니메이션 : 로딩중~ See the Pen anicss7 by hmm365 (@hmm365) on CodePen. css 코드보기 body { background-color: rgb(14,43,122); } .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%; animation: spin 1s infi.. 2022. 9. 27. css애니메이션 - 움직이는 박스 div class="document"> See the Pen cssani6 by hmm365 (@hmm365) on CodePen. 애니메이션 : 움직이는 박스 body { background-color: #666; 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 linear .. 2022. 9. 27. css애니메이션 - 통통튀는 글자 애니메이션 : 통통튀는 글자 See the Pen cssani5 by hmm365 (@hmm365) on CodePen. html,body{ width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, purple 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: axis-pan; font-size: 80px; color: #fff; position: relative; top: 20px; display: inline-block; -webkit-font-smoothing: anti.. 2022. 9. 27. Animation - 움직이는 사진 애니메이션 만들기 애니메이션 : 움직이는 사진 움직이는 사진을 만들어 봅시다. @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.woff2') forma.. 2022. 9. 20. CSS 애니메이션 - 웨이브 애니메이션 만들기 애니메이션 : 웨이브 웨이브하는 공을 만들어봅시다. @mixin center { display: flex; align-items: center; justify-content: center; } body { @include center; height: 100vh; background-image: linear-gradient(45deg, #00dbde 0%, #fc00ff 100%); } .row { display: flex; .circle { width: 10px; height: 10px; background: #fff; border-radius: 50%; margin: 5px 10px; transform-origin: top center; animation: spin 1s linear .. 2022. 9. 19. 이전 1 2 다음 728x90 반응형
