단일 요소 로더 : 막대

이 기사는 단일 요소 접근 방식과 스피너 및 도트에 중점을 둔 이전 기사에 사용 된 유연한 CSS 기술에 따라 막대를 사용하여 로딩 애니메이션을 만드는 것을 탐구합니다. CSS의 힘을 활용하여 최소한의 코드 변경으로 수많은 변형을 생성 할 것입니다.

시리즈 개요

• 단일 요소 로더 : 스피너
• 단일 요소 로더 : 도트
• 단일 요소 로더 : 막대 - 현재 기사
• 단일 요소 로더 : 3D로 이동합니다

20 개의 바 로더 예제로 다이빙합시다. 이것은 어려워 보일 수 있지만 모든 예제는 동일한 코드 구조를 공유하며 간단한 값 조정을 통해 변형이 달성됩니다. 초점은 하나의 특정 로더를 만드는 것이 아니라 단일 기본 코드에서 수많은 변형을 생성하는 마스터 링 기술에 중점을 둡니다.

막대 구성

비율을 유지하기 위해 width (또는 height ) 및 aspect-ratio 를 사용하여 치수를 정의하는 것으로 시작합니다.

 .bars {
  너비 : 45px;
  종횡비 : 1;
}

선형 구배 배경을 사용하여 3 개의 막대를 시뮬레이션합니다. 파트 2의 도트 로더와 유사한 방법입니다.

 .bars {
  너비 : 45px;
  종횡비 : 1;
  --c : 비 반복 선형 등급 (#000 0); / * 색상 정의 */
  배경: 
    var (-C) 0% 50%,
    var (-C) 50% 50%,
    var (-c) 100% 50%;
  배경 크기 : 20% 100%; / * 20% * (3 바 2 공간) = 100% */
}

이것은 3 바 구조를 만듭니다. 이 기사는 배경 조작을 크게 활용하므로 이전 기사 또는 링크 된 스택 오버플로 답변을 참조하면 필요한 경우 더 자세한 설명이 제공됩니다.

바를 애니메이션

애니메이션은 요소의 크기 또는 위치를 변경하여 달성됩니다. 키 프레임을 사용하여 크기를 애니메이션하자 :

 @keyframes load {
  0% {배경 크기 : 20% 100%, 20% 100%, 20% 100%; }
  33% {배경 크기 : 20% 10%, 20% 100%, 20% 100%; }
  50% {배경 크기 : 20% 100%, 20% 10%, 20% 100%; }
  66% {배경 크기 : 20% 100%, 20% 100%, 20% 10%; }
  100% {배경 크기 : 20% 100%, 20% 100%, 20% 100%; }
}

키 프레임은 애니메이션의 지속 시간에 걸쳐 각 그라디언트 세그먼트의 background-size 조정합니다.

또는 크기를 20% 50% 로 고정하고 위치를 애니메이션하면 결과가 다릅니다.

 .Loader { / * ... 이전 스타일 ... * /
  애니메이션 :로드 1s 인피니트 선형;
}
@keyframes load {
  / * ... 위치 애니메이션 키 프레임 ... */
}

크기와 위치를 조작하면 수많은 로더 변형이 가능합니다. 더 복잡한 그라디언트는 설계 옵션을 더 확장합니다. 데모의 대부분의 예제는 애니메이션 조합에서만 다른 마크 업과 스타일을 사용합니다.

고급 기술로 향상

DOTS 기사의 마스킹 기술은 여기에 적용 할 수 있습니다. background-* 속성을 mask-* 로 교체하고 그라디언트를 추가하면 시각적으로 매력적인 로더가 생성됩니다. 핵심 기술은 점과 막대간에 일관성이 있습니다. 그라디언트는 모양을 정의하고, 애니메이션은 크기/위치를 수정하고, 마스크는 색상을 추가합니다.

막대를 반올림합니다

다른 접근법은 pseudo-elements ::after ::before 사용하여 3 개의 둥근 막대를 만듭니다.

 .Loader { / * ... 크기와 위치에 CSS 변수를 사용하는 스타일 ... * /}

각 요소 내에 개별 그라디언트를 조심스럽게 배치하여 연속 구배 효과가 시뮬레이션됩니다. 지연으로 높이를 애니메이션하면 다양한 애니메이션이 생성됩니다.

결론

이 기사에서는 최소한의 코드로 복잡한 로딩 애니메이션을 만드는 데 대한 다양성을 보여줍니다. 단일 요소, ​​그라디언트, 의사 요소 및 애니메이션을 결합함으로써 다양한로드 애니메이션 디자인을 달성 할 수 있습니다. 제공된 예와 기술은 실험과 독특하고 시각적으로 매력적인 로더의 생성을 장려합니다.

위 내용은 단일 요소 로더 : 막대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!