2024/123 loading css animation 코딩/CSS 2024. 12. 12. 진행중입니다~ 하면서 로딩이미지 뜰 때 쓸만한 애니메이션을 css로 구현해 봄.점 3개가 뱅글뱅글 돌아가는 액션. .loader {position:relative;display:flex;align-items:center;width:38px;height:24px;}.dot{display:block;position:absolute;left:0;width:12px;height:12px;background:blue;border-radius:14px; aspect-ratio:1;animation:dot1 2.6s infinite, dot1-1 2.6s infinite;}.dot2 {animation-delay: -0.86s;}.dot3 {animation-delay: -1.73s;}@keyframes dot1 .. scrollbar css 코딩/CSS 2024. 12. 6. scrollbar 디자인 바꾸는 css 예시.background 투명이 안먹어서 검색해보니body 에 overflow:overlay를 해주면 크롬에서 스크롤바 배경이 투명하게 잘 나온다.엣지도 잘 나오고 파이어폭스는 자체스크롤을 써서 적용이 안됨.::-webkit-scrollbar{width:14px;height:14px;background-color: rgba(0,0,0,0%);}::-webkit-scrollbar-thumb{ background-color: #CFCFCF; border: 4px solid transparent; background-clip: padding-box; border-radius:100px;}body{overflow:overlay} focus 그라데이션 효과 코딩/CSS 2024. 12. 3. .form-control:focus { background-color: #fff; border-color: rgba(87, 79, 236, .5); box-shadow: 0 0 25px rgba(87, 79, 236, .1); color: #222; outline: 0;} 이전 1 다음
euntori
Comments