


WeChat applet realizes the animation effect of floating clouds on the login page
Jun 22, 2018 pm 03:43 PM<br>
It goes without saying that the WeChat mini program is currently very popular. Recently, I used my spare time to use the mini program to achieve a dynamic login page effect, so the following article mainly introduces it to you. Friends in need can refer to the relevant information on using the WeChat applet to achieve the cloud floating animation effect on the login page. Let’s take a look below.
Preface<br>
In 2017, the front-end became popular, WeChat mini-programs, weex, reactnative, and even Alipay also launched mini-programs. Program, I always feel that this is the rhythm of the original destruction, I will also take advantage of the heat to get on board in case of 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. <br>
Knowledge points<br>
Understanding animation
animation attribute is a Abbreviation attribute, used to set six animation attributes:
Value | Description |
Specifies the keyframe name that needs to be bound to the selector | |
Specifies the time it takes to complete the animation, in seconds or milliseconds | |
Specifies the speed curve of animation | |
Specifies in Delay before animation starts | |
Specifies the number of times the animation should play | |
Specify whether the animation should be played in reverse in turn |
There are many ways to understand translate
. This article mainly uses 2 indivual.translate3d(x,y,z)
Define 3D scaling transformation.
rotate3d(x,y,z,angle)
Define 3D rotation.
translate3d(1,1,0)<br>
<br>
rotate3d(1,1,0,45deg)
<br>
##Implementation <br>#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 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.
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); } }
I didn’t expect that keyframes not only support from to but also percentage ,good. Here, as long as you control the hierarchical relationship, animation duration, and transparency, you can achieve cloud floating.
SummaryI 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 slightly beauty point of view. Of course, more complex animations can only be updated when there is a chance.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
How to implement image selection area cropping in WeChat mini programHow to carousel images in WeChat mini program Set to adaptive heightThe above is the detailed content of WeChat applet realizes the animation effect of floating clouds on the login page. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics
![Animation not working in PowerPoint [Fixed]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Are you trying to create a presentation but can't add animation? If animations are not working in PowerPoint on your Windows PC, then this article will help you. This is a common problem that many people complain about. For example, animations may stop working during presentations in Microsoft Teams or during screen recordings. In this guide, we will explore various troubleshooting techniques to help you fix animations not working in PowerPoint on Windows. Why aren't my PowerPoint animations working? We have noticed that some possible reasons that may cause the animation in PowerPoint not working issue on Windows are as follows: Due to personal

Xianyu's official WeChat mini program has quietly been launched. In the mini program, you can post private messages to communicate with buyers/sellers, view personal information and orders, search for items, etc. If you are curious about what the Xianyu WeChat mini program is called, take a look now. What is the name of the Xianyu WeChat applet? Answer: Xianyu, idle transactions, second-hand sales, valuations and recycling. 1. In the mini program, you can post idle messages, communicate with buyers/sellers via private messages, view personal information and orders, search for specified items, etc.; 2. On the mini program page, there are homepage, nearby, post idle, messages, and mine. 5 functions; 3. If you want to use it, you must activate WeChat payment before you can purchase it;

CSS animation: How to achieve the flash effect of elements, specific code examples are needed. In web design, animation effects can sometimes bring a good user experience to the page. The glitter effect is a common animation effect that can make elements more eye-catching. The following will introduce how to use CSS to achieve the flash effect of elements. 1. Basic implementation of flash First, we need to use the animation property of CSS to achieve the flash effect. The value of the animation attribute needs to specify the animation name, animation execution time, and animation delay time

Implementing picture filter effects in WeChat mini programs With the popularity of social media applications, people are increasingly fond of applying filter effects to photos to enhance the artistic effect and attractiveness of the photos. Picture filter effects can also be implemented in WeChat mini programs, providing users with more interesting and creative photo editing functions. This article will introduce how to implement image filter effects in WeChat mini programs and provide specific code examples. First, we need to use the canvas component in the WeChat applet to load and edit images. The canvas component can be used on the page

To implement the drop-down menu effect in WeChat Mini Programs, specific code examples are required. With the popularity of mobile Internet, WeChat Mini Programs have become an important part of Internet development, and more and more people have begun to pay attention to and use WeChat Mini Programs. The development of WeChat mini programs is simpler and faster than traditional APP development, but it also requires mastering certain development skills. In the development of WeChat mini programs, drop-down menus are a common UI component, achieving a better user experience. This article will introduce in detail how to implement the drop-down menu effect in the WeChat applet and provide practical

The official WeChat mini program of Xianyu has been quietly launched. It provides users with a convenient platform that allows you to easily publish and trade idle items. In the mini program, you can communicate with buyers or sellers via private messages, view personal information and orders, and search for the items you want. So what exactly is Xianyu called in the WeChat mini program? This tutorial guide will introduce it to you in detail. Users who want to know, please follow this article and continue reading! What is the name of the Xianyu WeChat applet? Answer: Xianyu, idle transactions, second-hand sales, valuations and recycling. 1. In the mini program, you can post idle messages, communicate with buyers/sellers via private messages, view personal information and orders, search for specified items, etc.; 2. On the mini program page, there are homepage, nearby, post idle, messages, and mine. 5 functions; 3.

We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [

WeChat applet implements picture upload function With the development of mobile Internet, WeChat applet has become an indispensable part of people's lives. WeChat mini programs not only provide a wealth of application scenarios, but also support developer-defined functions, including image upload functions. This article will introduce how to implement the image upload function in the WeChat applet and provide specific code examples. 1. Preparatory work Before starting to write code, we need to download and install the WeChat developer tools and register as a WeChat developer. At the same time, you also need to understand WeChat
