로딩 애니메이션이란 무엇입니까?

시작하기 전에 약간의 지식을 복습해 보겠습니다. CSS3의 새로운 키프레임 애니메이션을 사용하면 많은 애니메이션을 구현할 수 있습니다. animation-delay를 사용하면 지연된 애니메이션 실행을 제어하여 풍부한 효과를 얻을 수 있습니다.

animation-delay 값이 양수이면 애니메이션이 초기 상태에서 지연됩니다.

animation-delay 값이 음수이면 애니메이션이 해당 값( 음수의 절대값) 상태로 실행을 시작합니다.

(효과 그림이 선명하지 않을 수 있으니 양해 부탁드립니다.)

1. 첫 번째 효과

총 16개의 작은 사각형, 위치 지정, 키를 통해 사각형 변경 프레임 투명도

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

각 사각형의 애니메이션 지연 값을 설정합니다. 여기서 전체 애니메이션 시간은 2초이고, 16개의 사각형을 균등하게 나눈 값은 0.125초이므로 설정한 애니메이션 지연 값은 -1.875초부터 시작됩니다. 0.125의 수치 차이를 가지며 0에 도달할 때까지 증가합니다.

2. 두 번째 효과

중앙에 있는 큰 공의 위치는 그대로 유지되고, 옆에 있는 작은 공 3개가 각각 3개의 사각형에 포함됩니다. {top:0;left :0;}, 이 교차점은 정사각형 RotateZ 회전을 설정하여 형성할 수 있습니다.

키프레임 애니메이션을 통해 애니메이션 프로세스를 설정하고(아래의 키프레임 애니메이션 작성은 최선의 방법이 아닙니다), 세 개의 공이 서로 다른 시간에 앞쪽에서 이동할 수 있도록 각 공에 대한 애니메이션 지연 값을 설정합니다.

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
      }
    }

또한 큰 공 주위를 회전하는 작은 공의 시각적 효과를 얻으려면 키 프레임 애니메이션을 통해 세 개의 작은 공의 상위 컨테이너에 대한 z-index 값을 설정해야 합니다.

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

3. 세 번째 효과

이 효과는 상대적으로 간단합니다. 공의 크기와 투명도만 변경하면 됩니다. (공의 투명도와 투명도) 너비와 높이는 처음에 정의됩니다).

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }

IV. 네 번째 효과

처음에는 4개의 공이 같은 위치에 위치하고, 키 프레임을 통해 공과 공의 왼쪽 값이 변경됩니다. 크기는 충분합니다.

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

지금은 여기까지입니다. 나중에 더 추가하겠습니다.

(계속됩니다)

위 내용은 로딩 애니메이션이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!