본문 바로가기

분류 전체보기327

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.

티스토리툴바