Shulou(Shulou.com)06/01 Report--

This "vue how to achieve landing page background particle effects" article knowledge points most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "vue how to achieve landing page background particle effects" article bar.

The effect picture is as follows

The dots and lines in the image above, generated by Vue-Particles, not only move themselves, but also interact with the user's mouse. The style of the example is a little ugly, let's make do with it.

1. Using tutorials

1.1 installation

Npm install vue-particles-save-dev

1.2 introduction of main.js files

Import Vue from 'vue'import VueParticles from' vue-particles'Vue.use (VueParticles)

1.3 use

1.4 Parameter interpretation

Color: String type. Default'# dedede'. Particle color.

ParticleOpacity: Number type. The default is 0.7. Particle transparency.

ParticlesNumber: Number type. The default is 80. The number of particles.

ShapeType: String type. The default is' circle'. The available particle appearance types are: "circle", "edge", "triangle", "polygon", "star".

ParticleSize: Number type. The default is 80. Individual particle size.

LinesColor: String type. Default'# dedede'. Line color.

LinesWidth: Number type. The default is 1. Line width.

LineLinked: Boolean type. Default true. Whether the connector is available.

LineOpacity: Number type. The default is 0.4. Line transparency.

LinesDistance: Number type. The default is 150. Line distance.

MoveSpeed: Number type. The default is 3. The velocity of the particles.

HoverEffect: Boolean type. Default true. Whether there are hover special effects.

HoverMode: String type. Default true. The available hover modes are: "grab", "repulse", "bubble".

ClickEffect: Boolean type. Default true. Whether there are click special effects.

ClickMode: String type. Default true. The available click modes are: "push", "remove", "repulse", "bubble".

1.5 pay attention

The complete code of the login page is attached here, which can be obtained on demand.

The background needs to be set 100% wide and high all over the screen.

Personnel management system

Remember to log in to export default {name: "Login", data () {return {imgSrc: require ('@ / assets/logo.png'), vcUrl:'/ vhr/verifyCode?time=' + new Date () LoginForm: {username: 'admin', password:' 123, code:'}, checked: true, rules: {username: [{required: true, message: 'please enter a user name' Trigger: 'blur'}], password: [{required: true, message:' enter password', trigger: 'blur'}], code: [{required: true, message:' enter verification code', trigger: 'blur'}]} Methods: {/ / Click the picture update verification code updateVerifyCode () {this.vcUrl ='/ vhr/verifyCode?time=' + new Date () }, submitLogin () {this.$refs.loginForm.validate ((valid) = > {if (valid) {/ / alert ('submittance') This.postKeyValueRequest ('/ doLogin', this.loginForm) .then (resp = > {if (resp) {/ / Save login information to sessionStorage, closing page information clears window.sessionStorage.setItem ("user", JSON.stringify (resp.obj)) / / redirect path let path = this.$route.query.redirect; this.$router.replace ((path = ='/'| | path = = undefined)?'/ home': path) } else {this.vcUrl ='/ vhr/verifyCode?time=' + new Date (); this.loginForm.code = "" }})} else {this.$message.error ('login failed, please log in again.') ; return false;}});}. Login-background {background: linear-gradient (- 180deg, # dcf2e6 0%, # ffffff 100%); width: 100%; height: 100% / * * 100% width and height is to fill the screen * / z-index:-1; position: absolute;}. Login-other {z-index: 1; margin: 180px 00 calc (calc (100vw-410px) / 2); position: absolute;} .loginContainer {border-radius: 15px; background-clip: padding-box; width: 350px Padding: 15px 35px 15px 35px; background: # fefefe; border: 1px solid # eaeaea; box-shadow: 0 25px # cac6c6;} .loginTitle {margin: 15px auto 20px auto; text-align: center; color: # 707070;} .loginRemember {text-align: left; margin: 0 15px 0 } the above is the content of this article on "how to achieve background particle effects on the login page by vue". 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.