WeChat 애플릿 로그인 페이지에 떠다니는 구름의 역동적인 효과를 부여하세요

巴扎黑

풀어 주다： 2017-05-14 14:06:49

원래의

6604명이 탐색했습니다.

요약: 현재 WeChat 미니 프로그램이 매우 인기가 있다는 것은 말할 필요도 없습니다. 특히 WeChat 팀이 최근 이전에 비판을 받았던 많은 미니 프로그램(퍼지 검색, 주변 미니 프로그램 등)을 개발했기 때문입니다. 최근 일부 네티즌들은 여가 시간에 작은 프로그램을 사용하여 동적 로그인 페이지 효과를 구현하고 있으므로 51개의 작은 프로그램에 대해 이 글을 작성해 보겠습니다...

현재 WeChat 미니 프로그램이 매우 인기가 있다는 것은 말할 필요도 없습니다. 특히 WeChat 팀은 최근 이전에 비판을 받았던 많은 미니 프로그램(퍼지 검색, 주변 미니 프로그램 등)을 개발했기 때문에 더욱 그렇습니다. 최근 일부 네티즌들은 여가 시간에 미니 프로그램을 사용하여 동적 로그인 페이지 효과를 얻었으므로 51개의 미니 프로그램을 사용해 보겠습니다. 이 기사에서는 주로 WeChat 미니 프로그램을 사용하여 클라우드 플로팅 로그인 페이지를 구현하는 방법을 소개합니다 애니메이션 효과에 대한 정보는 모두와 공유됩니다. 필요한 친구들은 아래에서 참고하세요.

머리말

2017년에는 프론트엔드가 대세, 위챗애플릿, 위엑스 , 리액트네이티브, 알리페이도 미니 프로그램을 출시했다. 나는 이것이 네이티브 파괴의 리듬이라고 항상 느끼기 때문에 파도가 닥칠 경우에 탑승할 것이다.

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

WeChat 애플릿 로그인 페이지에 떠다니는 구름의 역동적인 효과를 부여하세요

이 배경 이미지를 보자마자 강박장애가 느껴지더라구요. 왜 구름이 움직이지 않아서 문제의 물결이 시작되었습니다.

지식

애니메이션의 이해

애니메이션 속성은 6가지 애니메이션 속성을 설정하는 데 사용되는 약어 속성입니다.

값 설명 animation-name은 선택기에 바인딩되어야 하는 키프레임을 지정합니다. 이름 animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다. animation-timing-function은 애니메이션의 속도 곡선을 지정합니다. animation-delay는 지정합니다. 애니메이션이 시작되기 전의 시간 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 애플릿 로그인 페이지에 떠다니는 구름의 역동적인 효과를 부여하세요

구현

2개의 클라우드는 크기와 초기 위치만 다릅니다. .

.cloud {

위치: 절대;

z-index: 3;

너비:99px;높이:64px; 상단: 0;

오른쪽: 0;

하단: 0;

애니메이션: cloud 5s 선형 무한;

}

@keyframes cloud {

from {

변환: 번역3d(-125rpx, 0, 0);

}

변환:translate3d(180rpx, 0, 0);

}

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

WeChat 애플릿 로그인 페이지에 떠다니는 구름의 역동적인 효과를 부여하세요

코드는 다음과 같습니다.

@키프레임 사진 { 0% { 변환: translate3d(0, 20rpx, 0) 회전(-15deg); } 15% { 변형: translate3d(0, 0rpx, 0) 회전(25deg); } 36% { 변환: translate3d(0, -20rpx, 0 ) 회전(-20도); } 50% { 변환: translate3d(0, -10rpx, 0 ) 회전(15도); } 68% { 변형: translate3d(0, 10rpx, 0) 회전(-25도) } 85% { 변형: translate3d(0, 15rpx, 0) 회전(15도) } 100% { 변형: translate3d(0, 20rpx, 0) 회전(-15도) }}