단일 요소 로더 : 도트

이 기사에서는 단일 DIV 요소를 사용하여 로딩 애니메이션을 작성합니다. 우리는 이미 회전 로더를 해부했습니다. 이제 또 다른 친숙한 애니메이션 인 Dots를 다루겠습니다.

도트 로더는 어디에나 있습니다. 그들의 매력은 그들의 단순성에있다 : 텍스트 타원 (…)과 비슷한 3 개의 점이 동적 시각 시퀀스를 수행합니다.

시리즈 개요

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

우리의 목표는 하나의 div 만 사용 하여이 애니메이션을 복제하여 점당 개별 DIV 또는 별도의 애니메이션이 필요하지 않습니다. 위의 예는 단일 DIV, CSS 및 의사 요소가 없으며 배경 및 마스크 기술을 영리하게 결합하여이를 달성합니다. 색상을 바꾸는 점의 환상은 배경 그라디언트를 애니메이션으로 만들어 생성됩니다.

배경을 애니메이션합니다

배경 애니메이션부터 시작하겠습니다.

 .Loader {
  너비 : 180px;
  종횡비 : 8/5;
  배경: 
    Conic-gradient (빨간색 50%, Blue 0) 반복되지 않음, 
    Conic-gradient (녹색 50%, 자주색 0) 비 반복;
  배경 크기 : 200% 50%; 
  애니메이션 : 뒤로 4S 무한 선형;
}

@keyframes back {
  0%, 100% {배경 위치 : 0% 0%, 0% 100%; }
  25% {배경 위치 : 100% 0%, 0% 100%; }
  50% {배경 위치 : 100% 0%, 100% 100%; }
  75% {배경 위치 : 0% 0%, 100% 100%; }
}

180px 넓은 .loader 요소는 날카로운 색상 전이로 두 개의 원뿔 구배를 표시합니다. 상단 절반은 빨간색과 파란색, 하단 절반은 녹색과 자주색을 사용합니다. 200% 너비는 한 번에 한 번에 하나의 색상 만 보이도록합니다. 애니메이션은 위치를 순환하여 색상 변화의 환상을 만듭니다.

background-position 에 대한 더 깊은 이해는 이 스택 오버플로 답변을 참조하십시오. 애니메이션은 그라디언트의 X 및 Y 좌표를 영리하게 조작합니다.

선형 conic-gradient() linear-gradient() ?

conic-gradient() 사용하는 것은 더 간결하며 동일한 결과를 얻습니다.

애니메이션 타이밍 기능을 linear 에서 steps(1) 로 조정하면 색상 깜박임을 제거합니다.

점 생성

이전 기사에서와 같이 CSS 마스크를 사용합니다. 마스크를 통해 배경의 일부를 선택적으로 드러 낼 수 있습니다. 여기서 우리는 점을 만들어 배경 그라디언트를 공개합니다.

우리는 radial-gradient() :

 .Loader {
  / * ... 이전 스타일 ... */
  -_ g : 방사형 그레이드 ( #000 68%, #0000 71%) NO-Repeat;
  마스크 : var (-_ g), var (-_ g), var (-_ g);
  마스크 크기 : 25% 40%;
}

CSS 변수 --_g 는 코드를 단순화합니다. 3 개의 방사형 구배는 점을 만듭니다.

이제 점들을 움직이려면 애니메이션이 필요합니다.

 .Loader {
  / * ... 이전 스타일 ... */
  애니메이션 :로드 2S 무한;
}

@keyframes load {
  0%, 100% {마스크 위치 : 0% 0%, 50% 0%, 100% 0%; }
  16.67% {마스크 위치 : 0% 100%, 50% 0%, 100% 0%; }
  33.33% {마스크 위치 : 0% 100%, 50% 100%, 100% 0%; }
  50% {마스크 위치 : 0% 100%, 50% 100%, 100% 100%; }
  66.67% {마스크 위치 : 0% 0%, 50% 100%, 100% 100%; }
  83.33% {마스크 위치 : 0% 0%, 50% 0%, 100% 100%; }
}

이 애니메이션은 각 도트의 mask-position 의 y 좌표를 조정하여 상하 움직임을 만듭니다. 이것을 그라디언트 애니메이션과 결합하면 최종 효과가 발생합니다.

변형 및 추가 예

CSS 변수는 쉽게 색상과 크기 조정을 허용합니다. 키 프레임을 수정하여 다양한 애니메이션을 만들 수도 있습니다. 단일 도트 로더 및 Blobby Effect 로더를 포함한 추가 예는 여기에서 제공됩니다. CSS 그리드 접근 방식도 표시되어 크기 조정 및 포지셔닝을 단순화합니다.

결론과 다음 단계

이 기사는 단일 div가있는 도트 로더를 만드는 것을 보여주었습니다. 다음 기사는 여기서 배운 기술을 바탕으로 바 로더를 다루게됩니다.

시리즈 개요

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

( https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c 및 https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e with you with with had whalls.).

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