Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "WeChat Mini Programs how to achieve the cloud floating animation effect on the login page", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article, let's take a look at this article "WeChat Mini Programs how to achieve the landing page cloud floating animation effect" article.

Up-effect diagram (GIF dynamic diagram)

When I saw this background picture, obsessive-compulsive disorder immediately came, why the cloud did not move, so began a wave of trouble.

Knowledge point

Get to know animation

The animation property is an abbreviated property that sets six animation attributes:

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

Get to know translate

There are many methods, two of which are mainly used in this paper.

Translate3d defines 3D scaling transformations.

Rotate3d (XMagneyMagnez.Angle) defines 3D rotation.

Translate3d (1, 1, 1, 0)

You can understand it as (left and right, up and down, size) change.

Rotate3d (1pyrrine 0pcm45deg)

Realize

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

Among them, rpx is a unique attribute of Wechat, which is not affected by screen size, similar to the dp unit in Android. The keyframes is moving at a uniform speed, and you can see from the css that it has only changed the left and right direction.

two。 The avatar originally wanted to add a gondola, rippling like a swing, but did not succeed, just casually made a floating animation.

The code is as follows

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

Unexpectedly, keyframes not only supports from to but also supports percentage, not bad. Here, as long as the hierarchical relationship, animation duration, transparency can be controlled to achieve cloud floating.

The above is about the content of this article on "how to achieve the cloud floating animation effect on the landing page by WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.