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

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

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

Eleven, Effect Eleven

4개의 작은 공은 각각 4개의 사각형 p에 포함되어 있으며, 작은 공은 사각형을 기준으로 배치됩니다(위: 0, 왼쪽: 0). , 공이 네 모서리에 위치하도록 사각형 p의 회전을 설정한 다음 키프레임 애니메이션을 사용하여 공이 현재 위치와 중앙에 가까운 위치 사이를 앞뒤로 이동하도록 제어합니다

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

여전히 있습니다 사각형에 남는 회전 효과 p

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
      25%{
        transform: rotateZ(90deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(270deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

Twelve의 상위 요소, 12효과, 12

이 효과는 달성하기 어렵지 않습니다. 9개의 공을 고정하기만 하면 됩니다. 공의 위치 및 투명도 변경(각 공은 다른 애니메이션 시간으로 설정해야 함)

@keyframes mar_ligt {
      50%{
        opacity: 0.4;
      }
    }

13번째 효과 크기 변경으로 인해 레이아웃이 무질서해져서 각 공이 고정된 값으로 p에 포함됩니다. 너비와 높이가 공이 항상 p의 수평 및 수직 방향의 중심에 위치하도록 합니다. 이런 방식으로 공의 크기를 안전하게 변경할 수 있습니다(각 공은 여전히 ​​다른 애니메이션 시간으로 설정되어 있습니다). 작은 공은 중앙에 수평 및 수직 방향으로 배열되어 있고 중앙에 있는 두 개의 작은 공은 움직이지 않으며 왼쪽과 오른쪽의 작은 공은 양쪽으로 앞뒤로 움직입니다(시차에 주의하세요). 운동).

@keyframes mar_ligts {
      50%{
        transform: scale(.5);
        opacity: 0.4;
      }
    }

Fifteen, effect five

이 역시 매우 일반적인 효과입니다. 마찬가지로 공의 크기 변경으로 인한 페이지 레이아웃 혼란을 방지하기 위해 공에 추가합니다. 외부의 너비와 높이가 고정된 p 레이어. 각 공마다 애니메이션 지연도 설정해야 합니다

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {
      25%{
        transform: translateX(-100%);
      }
      50%{
        transform: translateX(0);
      }
    }
    @keyframes poolball_r {
      25%{
        transform: translateX(100%);
      }
      50%{
        transform: translateX(0);
      }
    }

Sixteen, Effect Sixteen

다섯 개의 작은 공을 수평 중앙에 놓고 바깥쪽 여백을 통해 확장하세요. 공은 키프레임 애니메이션을 통해 공의 이동Y, 너비, 높이 및 투명도를 변경합니다.

공의 초기 너비와 높이는 15px이고 투명도는 .6입니다.

{animation: size_change 1.2s linear infinite;}@keyframes size_change {
      20%{
        width: 0;
        height: 0;
      }
      40%{
        width: 0;
        height: 0;
      }
      50%{
        width: 20px;
        height: 20px;
      }
    }

계속됩니다! 오늘은 여기서 공유하겠습니다. 나중에 더 많은 내용이 나올 예정입니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼

,

CSS3 동영상 튜토리얼

,

bootstrap 튜토리얼

을 방문하세요.

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