다양한 로딩 애니메이션 공유-HTML 튜토리얼-php.cn

다양한 로딩 애니메이션 공유

零下一度

풀어 주다： 2017-07-26 17:40:30

원래의

1524명이 탐색했습니다.

다양한 로딩 애니메이션 공유:

23가지 효과

사각형 두 개, 처음에는 왼쪽 상단에 위치(상단: 0) ; 왼쪽: 0;);

완전한 움직임은 4단계로 나누어집니다: 첫 번째 단계는 왼쪽 상단을 오른쪽 상단으로 이동하고, 90° 회전하고, 두 번째 단계는 오른쪽 상단을 이동합니다. 오른쪽 아래로 180° 회전하면 세 번째 단계에서 너비와 높이가 복원되고 오른쪽 아래를 왼쪽 아래로 이동하고 270° 회전하고 네 번째 단계에서 너비와 높이를 줄이면 왼쪽 아래가 이동합니다. 왼쪽 상단으로 이동하여 360° 회전하고 너비와 높이를 복원합니다.

애니메이션 지연 시간 차이는 음의 절반 애니메이션 시간입니다.

{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }

로그인 후 복사

24, 효과 24

3개의 정사각형 div를 가로로 가운데, 세로로 아래쪽에 배치합니다. 초기 너비 높이는 0으로 설정됩니다.

위로 이동하면서 사각형의 너비와 높이를 변경하세요.

{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {  50% {
        height: 30px;width: 30px;top: 50%;
      }  100% {height: 0;width: 0;top: 0;
      }}

로그인 후 복사

twenty-5, Effect 25

은 내가 어렸을 때 내가 한 게임과 매우 유사합니다-Pac-Man

the Production 왼쪽 팩맨: 2 각 div의 너비와 높이가 0이고 테두리만 설정되었으며 오른쪽 테두리의 색상 속성은 투명으로 설정되었습니다.

.pac_head {  border: 25px solid #fff;  border-right-color: transparent;  border-radius: 50%;
    }

로그인 후 복사

팩맨의 입이 만들어졌고, 나머지 두 개는 한 div는 양의 Z축 방향으로 회전하고 다른 div는 역방향 Z축 방향으로 회전하여 먹는 동작을 합니다.

오른쪽에 있는 세 개의 작은 공은 모두 오른쪽 중앙으로 이동하여 팩맨의 입쪽으로 이동하도록 설정되어 있습니다. 공과 팩맨의 애니메이션 시간을 적절하게 조정하면 됩니다.

@keyframes pac_ball {  100% {
        right: 55%;
      }}

로그인 후 복사

스물여섯, 효과 스물여섯

종이를 두드리는 소리

이 효과의 어려움은 떨어지는 효과와 변형 효과를 만드는 방법입니다. 실제로는 매우 간단합니다. 우선, 정사각형은 Z축을 중심으로 90배만큼 회전하면 원본 이미지와 정확히 동일하게 보일 것이라는 점을 이해해야 합니다. 그런 다음 이 효과를 만드는 것은 매우 간단합니다. 각 모서리에 변형 효과를 추가하는 것을 고려해야 합니다.

변형 효과: 이러한 종류의 변형을 생성하려면 테두리 반경 값을 변경하면 됩니다.

@keyframes beat_ball {  25% {
        transform: translateY(25%) rotate(22.5deg);//下落border-bottom-right-radius: 10%;
      }  50% {border-bottom-right-radius: 100%;transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale，是为了让形变看起来有弹性      }  75% {transform: translateY(25%) rotate(67.5deg)   //上升      }  100% {transform: translateY(0) rotate(90deg)        //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可      }}

로그인 후 복사

그림자 효과가 더욱 좋습니다. 평평한 타원, 상자 그림자를 만들고 그림자 효과를 추가하고 적절한 시기에 크기를 변경하세요.

@keyframes beat_shadow {  50%{
        transform: scale(1.25,0.8);
      }}

로그인 후 복사

27, 효과 27

div 및 의사 클래스가 생성됩니다.

div는 회전을 담당하고, pseudo-class는 높이 변경을 담당합니다.

@keyframes locker_ball {           //div旋转
      25%{
        transform: rotateZ(180deg);
      }  50%{transform: rotateZ(180deg);
      }  75%{transform: rotateZ(360deg);
      }  100%{transform: rotateZ(360deg);
      }}
    @keyframes locker_ballh {     //伪类高度改变
      25%{
        height: 40px;
      }  50%{height: 0;
      }  75%{height: 0;
      }  100%{height: 40px;
      }}

로그인 후 복사

스물여덟, 효과 스물여덟

시계의 효과(나의 위치가 중앙에 안맞는듯)

의 효과 시계만 사용됩니다. 키프레임 애니메이션, 즉 360° 회전만 사용하면 됩니다. 두 포인터의 애니메이션 이동 시간만 변경하면 됩니다.

@keyframes clock {  100%{
        transform: rotateZ(360deg);
      }}

로그인 후 복사

이 애니메이션 시리즈에서 일부 일시 정지 효과는 특정 비율에서 특정 비율까지 상태를 유지하기 위한 키 프레임 제어를 통해 달성되는 반면 다른 효과는 모션 곡선 완화를 통해 달성됩니다.

꽃으로 마무리~주말 보내세요~

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