본문 바로가기

분류 전체보기327

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.

티스토리툴바