머리말

2017년에는 위챗 미니 프로그램이 인기를 끌었고, 위엑스(weex), 리액트네이티브(reactnative), 심지어 알리페이(alipay)도 미니 프로그램을 출시하면서 이것이 네이티브 파괴의 리듬이라고 항상 느낀다. 그것을 이용하면 자동차도 위험해집니다.

위 렌더링(GI 애니메이션)

WeChat 애플릿 로그인 페이지: CSS가 애니메이션 클라우드 플로팅을 실현합니다.

WeChat 애플릿 애니메이션

이 배경 이미지를 봤을 때 내가 거기 있었을 때 , 강박 장애가 즉시 발생했습니다. 왜 구름이 움직이지 않았습니까?

지식 포인트

애니메이션 이해

애니메이션 속성은 6개의 애니메이션 속성을 설정하는 데 사용되는 축약된 속성입니다.
값 설명
animation-name need 선택기에 바인딩된 키프레임의 이름입니다. .
animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.
animation-timing-function은 애니메이션의 속도 곡선을 지정합니다.
animation-delay는 애니메이션이 시작되기 전의 지연을 지정합니다.
animation-iteration-count는 애니메이션이 재생되어야 하는 횟수를 지정합니다.
animation-direction은 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

번역을 이해하는 방법은 다양합니다

. 이 글에서는 주로 2가지 방법을 사용합니다.

translate3d(x,y,z)는 3D 스케일링 변환을 정의합니다.
rotate3d(x,y,z,angle) 3D 회전을 정의합니다.

translate3d(1,1,0)
(좌우, 상하, 크기)가 변한다고 이해하시면 됩니다.
rotate3d(1,1,0,45deg)

WeChat 애플릿 로그인 페이지: CSS가 애니메이션 클라우드 플로팅을 실현합니다.

rotate3d

구현

1. 두 구름은 크기와 초기 위치를 제외하고는 동일합니다.

.cloud {
  position: absolute;
  z-index: 3;
  width:99px;height:64px; top: 0; 
  right: 0;
  bottom: 0;
  animation: cloud 5s linear infinite;
}

@keyframes cloud {
  from {
    transform: translate3d(-125rpx, 0, 0);
  }

  to {
    transform: translate3d(180rpx, 0, 0);
  }
}

로그인 후 복사

그 중 rpx는 위챗의 고유한 속성으로 안드로이드의 dp 단위와 마찬가지로 화면 크기에 영향을 받지 않습니다. 키프레임은 일정한 속도로 이동하는데, CSS를 보면 왼쪽과 오른쪽 방향만 바뀌는 것을 볼 수 있습니다.
2. 원래는 아바타에 매달린 바구니를 추가해서 그네처럼 흔들리게 만들고 싶었는데, 그냥 떠다니는 애니메이션을 임의로 만들었습니다.

WeChat 애플릿 로그인 페이지: CSS가 애니메이션 클라우드 플로팅을 실현합니다.

코드는 다음과 같습니다

@keyframes pic {
  0% {
    transform: translate3d(0, 20rpx, 0) rotate(-15deg);
  }
  15% {
    transform: translate3d(0, 0rpx, 0) rotate(25deg);
  }
  36% {
    transform: translate3d(0, -20rpx, 0) rotate(-20deg);
  }
  50% {
    transform: translate3d(0, -10rpx, 0) rotate(15deg);
  }
  68% {
    transform: translate3d(0, 10rpx, 0) rotate(-25deg);
  }
  85% {
    transform: translate3d(0, 15rpx, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(0, 20rpx, 0) rotate(-15deg);
  }
}

로그인 후 복사

키프레임이 from to 뿐만 아니라 %도 지원하는 줄은 몰랐습니다. 좋다. 여기에서 계층 관계, 애니메이션 지속 시간 및 투명도를 제어하는 한 구름 부동을 달성할 수 있습니다.