내마음대로만들어보자/CSS25 CSS Animation - bar body { height: 100vh; /* vh는 화면 크기에 따라 높이값이 다르기때문에 100등분을 했다고 이해하면된다. */ background-image: linear-gradient(to top, #ff758c 0%, #ff7eb3 100%); } .bar { width: 5px; height: 400px; background: #fff; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto; animation-name: bar; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 100; } /* @keyframe.. 2021. 12. 14. CSS Animation - Wave body { height: 100vh; background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); display: flex; align-items: center; /* 상하로 가운데로 정렬 */ justify-content: center; /* 좌우로 가운데로 정렬 */ } .circle { width: 10px; height: 10px; background: #fff; margin: 5px 10px; border-radius: 50%; transform-origin: top center; /* transform-origin은 요소의 움직임 방향을 정의한다. */ animation: spin 1s linear infinite; } @keyf.. 2021. 12. 13. CSS Animation - cube Kang body { background-color: #FCDF8A; height: 100vh; perspective: 1000px; //perspective를 사용해서 원근감을 줄수있다. 숫자가 커질수록 멀리서 보는 느낌이 든다. display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; // 요소의 움직임 방향을 정의한다. preserve-3d로 할경우 3d로 설정이 가능하다 transform: rotateX(60deg) rotatey(-30deg); //rotate는 회전 animation: .. 2021. 12. 12. CSS Animation - dot body{ height: 100vh; background: linear-gradient(135deg,#00A8C5,#D9E021); } .loading { width: 20px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: loading ease-in-out 1s 100; //loading은 keyframes 이름을 정하는것 } .loading .circle1 { width: 20px; height: 20px; background: #fff; border-radius: 50%; } .loading .circle2 { width: 20px; height: 20px; bac.. 2021. 12. 12. 이전 1 2 3 4 5 6 7 다음