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

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

이전 글 [CSS3 학습 페이지 로딩 애니메이션(3)]에서 CSS3 로딩 애니메이션 6개를 더 공유했는데, 오늘도 계속해서 공유하겠습니다. (제목은 저번에 이어집니다.) .

Seventeen, Effect Seventeen

세로 중앙에 넓은 간격으로 배치된 작은 공 3개를 차례로 작은 공의translateY 값으로 변경하면 됩니다.

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

Eighteen, effect sixteen

효과 관점에서 공 사이의 거리를 확장하기 위해 외부 여백을 사용하여 수평 및 수직 중앙에 위치한 세 개의 작은 공 두 개 왼쪽과 오른쪽에 있는 작은 공이 가운데 공 주위를 돌고 있습니다. 그런 다음 작은 공의 상위 요소를 직접 회전시켜 양쪽에 있는 작은 공의 주변 효과를 얻을 수 있습니다(부모 요소가 회전할 때). 원, 가운데 공은 회전하는 것으로 볼 수 없으며 가운데 공의 위치는 시각적으로 변경되지 않습니다.

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

Nineteen, Effect Nineteen

총 5개의 공이 있지만 각 공의 애니메이션 지연 시간은 다릅니다. 5개의 공을 동일한 시작점으로 동일한 위치에 배치합니다. (여기서는 5개의 공을 맨 오른쪽에 배치했습니다.)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点，开始返回起点      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

20, 효과 20

총 8개의 작은 공이 원을 이루도록 배치되어 있으며, 작은 공의 너비와 높이를 변경하면 됩니다. (작은 공의 변경은 작은 공의 중심을 기준으로 합니다.)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

(50%-80% 작은 공의 너비와 높이가 0을 유지하여 절반은 표시되고 절반은 숨겨진 효과를 형성합니다.)

21, 21 효과

3개의 작은 공이 들어 있습니다. 전체 각 공의 궤적은 여전히 ​​동일합니다. 여기서는 세 개의 공의 중심을 수직으로 위쪽에, 중앙에 수평으로 배치한 다음 먼저 오른쪽 아래 모서리로, 그 다음 왼쪽 아래 모서리로 3단계로 이동했습니다. 모퉁이를 돌고 마침내 출발점으로 돌아갑니다.

(각 스테이지 중간쯤 시점에서 투명도 변경이 추가됩니다)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

스물둘, 효과 스물둘

이것은 회전하는 것과 비슷합니다 기어의 경우 기어 모양을 만드는 방법이 핵심입니다. p의 경우 구현 테두리에 내부 원을 만들고 p의 의사 클래스 점선 테두리에 외부 톱니 모양을 만듭니다. 톱니 모양이 희박할수록 치아는 더 조밀해집니다.

기어가 만들어졌으니 이제 남은 것은 작은 회전 케이스뿐입니다.

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

오늘의 나눔은 끝났고, 나중에 또 한 번의 웨이브가 있을 것이고, 꽃으로 끝날 것입니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , CSS3 동영상 튜토리얼 , bootstrap 튜토리얼 을 방문하세요.

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