단일 요소 로더 : 3D로 이동합니다!

단일 요소 로더 시리즈 의이 최종 설치는 3D 디자인을 탐구합니다. 하나의 HTML 요소만으로 설득력있는 3D 큐브를 만드는 것은 불가능 해 보이지만, 3 개의 가시적 인 얼굴 만 영리하게 렌더링하면 큐브와 같은 효과를 얻을 수 있습니다. 그것을 만들자!

시리즈 요약

• 단일 요소 로더 : 스피너
• 단일 요소 로더 : 도트
• 단일 요소 로더 : 막대
• 단일 요소 로더 : Going 3D - 당신은 여기 있습니다

분할 큐브 로더

이 로더는 2 개의 큐브 분할을 나타내지 만 단일 HTML 요소 만 사용합니다. 각 절반은 의사 요소 ( ::before 및 ::after )를 사용하여 생성됩니다.

마법은 원뿔 구배, CSS clip-path 및 부정적인 여백을 결합하는 데 있습니다. 원뿔 구배는 얼굴을 색칠하고 clip-path 모양을 형성하며, 음수 여백은 의사 요소와 겹쳐서 완전한 큐브를 시뮬레이션합니다. 애니메이션은 로더를 생생하게합니다.

시각적 표현은 clip-path 계산을 명확하게 설명합니다. (다이어그램은 원본과 유사하게 여기에 배치됩니다)

코딩합시다. 먼저 .loader 요소를 설정합니다.

 .Loader {
  ---S : 150px; / * 크기 제어 */
  --_ d : calc (0.353 * var (-S)); / * 0.353 = sin (45deg)/2 */

  너비 : calc (var (-S) var (-_ d));
  종횡비 : 1;
  디스플레이 : Flex;
}

다음으로, 의사 요소 :

 .Loader :: 이전,
.Loader :: 후 {
  콘텐츠: "";
  플렉스 : 1;
}

원뿔 구배 적용 :

 .Loader :: 이전,
.Loader :: 후 {
  배경 : conic-gradient (calc의 -90deg에서 (100%-var (-_ d)) var (-_ d), #fff 135deg, #666 0 270deg, #aaa 0);
}

그라디언트 클립 :

 .Loader :: 이전,
.Loader :: 후 {
  클립-패스 : 다각형 (var (-_ d) 0, 100% 0, 100% calc (100%-var (-_ d)), calc (100%-var (-_ d)) 100%, 0 100%, 0 var (-_ d));
}

부정적인 마진을 사용하여 반쪽을 겹치십시오.

 .Loader :: 이전 {마진-오른쪽 : calc (var (--_ d) / -2); }
.Loader :: 이후의 {margin-left : calc (var (--_ d) / -2); }

마지막으로 애니메이션 :

 .Loader :: 이전,
.Loader :: 후 {
  애니메이션 :로드 1.5S 무한 입방-베 지어 (0, .5, .5, 1.8) 대체;
}
.Loader :: 이후 {애니메이션 -델리 : -.75S; }

@keyframes load {
  0%, 40% {transform : translatey (calc (var (-s) / -4)); }
  60%, 100% {transform : translatey (calc (var (-s) / 4)); }
}

(마지막 데모는 여기에 표시됩니다)

진행 큐브 로더

이 기술을 단일 요소로 3D 진행 로더에 적응합시다! 큐브 시뮬레이션은 동일하게 유지되지만 높이와 종횡비를 조정합니다. 애니메이션은 왼쪽 너비가 증가함에 따라 나머지 공간을 채우기 위해 flex-grow: 1 영리하게 사용합니다.

오른쪽에 투명성을 추가하십시오.

 .Loader :: {불투명도 : 0.4; }

background-color 및 background-blend-mode 사용하여 왼쪽 색상을 변경하십시오.

 .Loader :: 이전 {
  배경색 : #CC333F;
  배경 블렌드 모드 : 곱;
}

왼쪽 너비에 애니메이션 :

 @keyframes load {
  0%, 5% {너비 : var (-_ d); }
  95%, 100%{너비 : 100%; }
}

(바닥면 문제를 해결하면서 개선 된 데모가 여기에 표시됩니다)

하단면에 대한 수정을 포함한 전체 코드 : (완전한 코드가 여기에 포함됩니다)

(추가 3D 예제 및 설명은 원본과 유사하게 이미지 배치 및 서식 유지 관리)

이것은 최소한의 마크 업으로 복잡한 효과를 만들기위한 CSS의 힘을 보여줍니다. 자신만의 변형을 실험하고 만듭니다!

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