CSS Animation - hover Effect4 Mouse Hover Effect05 마우스 오버 효과입니다. Mouse Hover Effect05 마우스 오버 효과입니다. Mouse Hover Effect06 마우스 오버 효과입니다. Mouse Hover Effect06 마우스 오버 효과입니다. body { font-family: 'BMJUA'; height: 100vh; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .hover_wrap { display: flex; align-items: center; justify-content: center; height: 100vh; perspective: 1000px; } .hover_wrap .effect { position.. 2021. 12. 18. CSS Animation - hoverEffect2 @font-face { font-family: 'BMJUA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'BMJUA'; height: 100vh; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .hover_wrap { display: flex; align-items: center; justify-content: center; height: 100vh; } .hover_wrap > .. 2021. 12. 18. 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. CSS Animation -tail body { height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); } .circle { position: absolute; animation: movex 1s ease-in-out alternate infinite; //alternate는 움직임의 방향을 순방향을 진행 후 역방향으로 설정 //infinite는 애니메이션 반복 횟수를 무한으로 설정 } .circle > div { background: #fff; width: 50px; height: 50px; border-radius: 50%; ani.. 2021. 12. 12. Hover Effect 참고자료3 //figure 태그는 img태그와는 다르게 설명을 넣을때사용하며, 이미지/영상 등을 올릴때 쓴다. //설명을 넣을때는 figcaption태그를 활용 mouse hover mouse hover body{ height: 100vh; background: #0F2027; background: linear-gradient(120deg, #2C5364, #203A43, #0F2027); font-family: 'Jua', sans-serif; } .hover_wrap{ display: flex; justify-content: center; align-items: center; height: 100vh; } .hover_wrap figure{ position: relative; width: 400px; margi.. 2021. 12. 12. 이전 1 ··· 7 8 9 10 11 12 13 ··· 41 다음