CSS3 학습 페이지 로딩 애니메이션 (5)-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-10-15 16:36:12

앞으로

2233명이 탐색했습니다.

이전에 22가지 효과가 포함된 4개의 기사를 게시했습니다. 이번 기사에서는 6가지 유형의 CSS3 페이지 로딩 애니메이션, 총 28가지 페이지 로딩 애니메이션 효과를 공유하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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

스물셋, 효과 스물셋

두 개의 사각형이 처음에 왼쪽 상단에 배치됩니다(상단: 0; 왼쪽: 0;)

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

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

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
      25% {
        -webkit-transform: scale(.5) rotateZ(90deg);
        transform: scale(.5) rotateZ(90deg);
        top: 0;
        left: 100%;
      }
      50% {
        -webkit-transform: scale(1) rotateZ(180deg);
        transform: scale(1) rotateZ(180deg);
        top: 100%;
        left: 100%;
      }
      75% {
        -webkit-transform: scale(.5) rotateZ(270deg);
        transform: scale(.5) rotateZ(270deg);
        top: 100%;
        left: 0;
      }
      100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
        top: 0;
        left: 0;
      }
    }

로그인 후 복사

스물넷, 효과 스물넷

불꽃의 박동효과와 유사하게 정사각형 ps 3개를 가로 중앙, 아래 세로로 배치하고 초기값을 설정합니다. 너비와 높이를 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;
      }
    }

로그인 후 복사

스물다섯, 효과 스물다섯

어렸을 때 했던 게임인 팩맨과 아주 비슷해요 - 팩맨

팩맨의 탄생 왼쪽: 두 개의 p 너비와 높이가 0이고 테두리만 설정하고 오른쪽 테두리의 색상 속성을 투명으로 설정합니다. 코드와 효과는 다음과 같습니다.

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

로그인 후 복사

Pac-Man의 입이 만들어졌습니다. 나머지는 p 2개와 양의 Z축 1개 회전, 역방향 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);
      }
    }

로그인 후 복사

스물일곱, 효과 스물일곱

Ap, 의사 클래스가 만들어집니다.

p는 회전을 담당하고, pseudo 클래스는 높이 변경을 담당합니다.

@keyframes locker_ball {           //p旋转
      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);
      }
    }

로그인 후 복사

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

꽃으로 마무리! 이 시리즈가 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , CSS3 동영상 튜토리얼 , bootstrap 튜토리얼 을 방문하세요.

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