이 기사의 내용은 CSS를 사용하여 롤러코스터 로더의 애니메이션 효과를 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
효과 미리보기
코드 해석
돔 정의, 컨테이너에는 3개의 점을 나타내는 3개의 요소가 포함되어 있습니다:
<p> <span></span> <span></span> <span></span> </p>
중앙 디스플레이:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, silver, teal); }
대관람차의 직경 정의, 기타 길이는 다음 값을 기준으로 합니다.
.loader { --diameter: 10em; }
컨테이너 크기를 정의합니다. 너비는 높이의 2배입니다.
.loader { --width: calc(var(--diameter) * 2); width: var(--width); height: var(--diameter); }
의사 요소의 공유 속성을 정의합니다.
.loader { position: relative; } .loader::before, .loader::after { content: ''; position: absolute; bottom: 0; }
하단 트랙을 그리고 선 두께를 정의합니다. 변수 :
.loader { --stroke-width: calc(var(--diameter) / 40); color: white; } .loader::before { width: inherit; height: var(--stroke-width); background-color: currentColor; }
중앙에 원형 궤도 그리기:
.loader::after { box-sizing: border-box; width: var(--diameter); height: var(--diameter); border: var(--stroke-width) solid; border-radius: 50%; left: 25%; }
점을 그리고 점의 직경을 나타내는 변수 정의:
.loader { --dot-diameter: calc(var(--diameter) / 10); } .loader span { position: absolute; width: var(--dot-diameter); height: var(--dot-diameter); background-color: currentColor; border-radius: 50%; bottom: var(--stroke-width); left: calc((var(--width) - var(--dot-diameter)) / 2); }
점이 원형 궤도를 따라 회전하도록 애니메이션 효과 추가:
.loader span { animation: rotating 2s linear infinite; --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1); transform-origin: 50% var(--vertical-center); } @keyframes rotating { 0%, 10% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-1turn); } }
Add 점에 움직이는 애니메이션 효과:
.loader span { animation: run 2s linear infinite, rotating 2s linear infinite; } @keyframes run { 0% { left: calc(var(--dot-diameter) * -1); } 10%, 60% { left: calc((var(--width) - var(--dot-diameter)) / 2); } 70%, 100% { left: calc(var(--width)); } }
다른 2개의 점에 애니메이션 지연을 설정하여 3개의 점이 서로 옆에 있는 3개의 마차처럼 보이도록 합니다.
.loader span:nth-child(1) { animation-delay: 0.075s; } .loader span:nth-child(2) { animation-delay: 0.15s; }
마지막으로 컨테이너 외부에 숨깁니다. 내용:
.loader { overflow: hidden; }
추천 관련 기사:
순수한 CSS를 사용하여 녹색 돼지 효과를 구현하는 방법
위 내용은 롤러코스터 로더의 애니메이션 효과를 구현하기 위해 CSS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!