유리 형태 로드 애니메이션

유리 형태 로드 애니메이션

반응형

이 기사에서는 유리형태를 가진 로딩 스피너를 제작할 것입니다. 먼저 우리가 무엇을 만들고 있는지 봅시다.

우리는 이 애니메이션을 만들기 위해 간단한 div만 있으면 됩니다. 이 애니메이션에서는 의사 클래스와 ::전, ::후를 변환하는 일반 키프레임을 사용했습니다.

HTML

CSS

/* Main Loader */ .loader { position: relative; width: 180px; height: 180px; } .loader::before, .loader::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } /* Loader Blue Circle */ .loader::before { background: #5989ff; animation: animate 2s ease-in-out infinite; } /* Loader Glassmorphism */ .loader::after { background: rgba(56, 109, 241, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); animation: animate 2s ease-in-out infinite; z-index: 1; animation-delay: -1s; } /* Animation */ @keyframes animate { 0%, 100% { transform: translateX(-80px); } 50% { transform: translateX(80px); } }

코데펜 -

결론

그 이후에는 프로젝트 어디에서나 사용할 수 있습니다. 그리고 그것에 대해 어떻게 생각하는지 알려주세요. 맘에 드시면 팔로우를 고려해보세요. 왜냐하면 저는 이런 것들을 더 많이 만들거니까요.

또한 읽기

즐겨찾기에 추가해야 하는 10개의 CSS 리소스

이상한 개념의 자바스크립트

몇 가지 Javascript 메소드

from http://information-bada.tistory.com/76 by ccl(A) rewrite - 2021-10-28 06:27:42