Let the WeChat applet login page have the dynamic effect of floating clouds

Abstract: It goes without saying that WeChat mini programs are currently very popular, especially since the WeChat team has recently developed many mini programs that have been criticized before: fuzzy search, nearby mini programs, etc. Recently, some netizens used their spare time to use small programs to achieve a dynamic login page effect, so let’s write this article with 51 small programs...

It goes without saying that WeChat mini programs are currently very popular, especially since the WeChat team has recently developed many mini programs that have been criticized before: fuzzy search, nearby mini programs, etc. Recently, some netizens used their free time to use mini programs to achieve a dynamic login page effect, so let’s use 51 mini programs. This article mainly introduces the use of WeChat mini programs to achieve cloud floating login page The relevant information about animation effect is shared with everyone. Friends who need it can refer to it. Let’s take a look below.

Preface

The front-end is popular in 2017, WeChat applet, weex, reactnative , even Alipay has launched a mini program. I always feel that this is the rhythm of native destruction, so I will take advantage of the trend to get on board in case there is a wave.

Last rendering (GIF animation)

When I saw this background picture, I immediately felt obsessive-compulsive disorder I wondered why the clouds didn't move, so a wave of trouble began.

Knowledge points

Understanding animation

The animation property is an abbreviated property used to set six animation properties:

Value Description animation-name specifies the keyframe that needs to be bound to the selector Name animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds animation-timing-function specifies the speed curve of the animation animation-delay specifies the time before the animation starts Delay animation-iteration-count specifies the number of times the animation should be played animation-direction specifies whether the animation should be played in reverse in turn

There are many methods to understand translate

, this article mainly uses 2.
+ translate3d(x,y,z) defines 3D scaling transformation.
+ rotate3d(x,y,z,angle) defines 3D rotation.

translate3d(1,1,0)
You can understand it as (left and right, up and down, size) changes.
rotate3d(1,1,0,45deg)

#Implementation

1. The two clouds are the same except for their size and initial position. .

.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);

}

}

where rpx is a unique attribute of WeChat and is not affected by the screen size, similar to# The dp unit in ##Android. Keyframes move at a constant speed. From the css, you can see that only the left and right directions are changed.
2. I originally wanted to add a hanging basket to the avatar to make it swing like a swing, but I didn't succeed. I just made a random animation of floating around.

code show as below:

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

I didn’t expect that keyframes not only support from to but also percentage, which is good. Here, as long as you control the hierarchical relationship, animation duration, and transparency, you can achieve cloud floating.

Summary

I have to say that CSS still has a lot of animations and special effects. Adding a little animation to the WeChat applet can make the page more beautiful. Of course, more complex animations can only be updated when given the opportunity.

The above is the detailed content of Let the WeChat applet login page have the dynamic effect of floating clouds. For more information, please follow other related articles on the PHP Chinese website!