애니메이션 컬렉션 로드 중-HTML 튜토리얼-php.cn

애니메이션 컬렉션 로드 중

零下一度

풀어 주다： 2017-07-24 10:12:08

원래의

2117명이 탐색했습니다.

ㅋㅋㅋ 작은 공은 각각 네 모서리에 위치하고 키프레임 애니메이션을 사용하여 공이 현재 위치와 중심점에 가까운 위치 사이를 앞뒤로 이동하도록 제어합니다

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

로그인 후 복사

아직 회전 효과가 남아 있습니다. 이는 정사각형 div의 상위 요소에 남아 있습니다

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

로그인 후 복사

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

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

로그인 후 복사

아직 9개의 작은 공이 있지만 여기서는 레이아웃이 방해되는 것을 방지하기 위해 작은 공의 크기를 변경했습니다. 크기 변화로 인해 무질서해지기 때문에 각각의 작은 공은 너비와 높이가 고정된 div에 포함되므로 공은 항상 div의 가로 및 세로 방향 중앙에 위치합니다. 이런 방식으로 공의 크기를 안전하게 변경할 수 있습니다. (각 공은 여전히 다른 애니메이션 시간으로 설정되어 있습니다.)

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

로그인 후 복사

당구 효과, 4개의 공이 중앙에 배열됨 수평 및 수직으로 중앙에 있는 두 개의 작은 공은 움직이지 않으며, 왼쪽과 오른쪽에 있는 작은 공은 양쪽으로 앞뒤로 움직입니다(움직임의 시간 차이에 주의하세요).

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

로그인 후 복사

이것은 매우 일반적인 효과입니다. 마찬가지로 공의 크기 변경으로 인한 페이지 레이아웃 혼란을 방지하기 위해 고정 너비의 레이어가 공 외부에 추가됩니다. 공.

각 공에 대해 애니메이션 지연도 설정해야 합니다.

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

로그인 후 복사

다섯 개의 작은 공을 수평으로 중앙에 두고 바깥쪽 여백을 사용하여 공 사이의 거리를 넓힙니다. 키프레임 애니메이션을 통해 공의 이동Y, 너비, 높이 및 투명도를 조정합니다.

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