CSS3 학습 페이지 로딩 애니메이션 (1)

이 기사에서는 네 가지 유형의 CSS3 페이지 로딩 애니메이션을 공유합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이틀전에 어떤 웹사이트에서 좋은 로딩 애니메이션 효과를 봤는데, 순수 CSS3로 작성되어 있어서 느낌이 좋아서 그 효과에 맞춰 직접 써보았습니다.

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

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

animation-delay 값이 음수이면 애니메이션이 해당 값(절대값)에서 진행됩니다. 음수)에 해당하는 상태가 실행을 시작합니다.

(효과 그림이 선명하지 않을 수 있으니 이해해주세요)

1. 첫 번째 효과

총 16개의 작은 사각형이 있고, 위치를 지정하고, 키를 통해 사각형의 투명도를 변경합니다. frames

{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-색인 값을 설정해야 합니다.

{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;
      }
    }

네 번째 효과

처음에는 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);
      }
    }

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

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼, CSS3 동영상 튜토리얼, bootstrap 튜토리얼을 방문하세요!

위 내용은 CSS3 학습 페이지 로딩 애니메이션 (1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!