蘑菇博客后台登录页面增加粒子特效

前言

这两天有个老哥给我推荐博客的后台登录页面添加粒子特效，后面看了看效果还不错，就把打加入到博客的后台登录页面中了，下面看添加后的效果图：

111

图上那些类似于星座图的点和线，是由vue-particles生成的，不仅自己动，而且能与用户鼠标事件产生互动。

添加粒子特效

安装 vue-particles依赖

npm install vue-particles --save-dev

main.js引入

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

在index.vue页面中引入

<vue-particles
    color="#fff"
    :particleOpacity="0.7"
    :particlesNumber="60"
    shapeType="circle"
    :particleSize="4"
    linesColor="#fff"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="2"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
    class="lizi"
>
</vue-particles>

引入时需要注意

在引入到页面的时候，我们需要注意，不能够直接放在页面的最上方，这样会显示不了我们写的页面，因为这个粒子特效是向上覆盖的，所以我们需要在我们页面的最下方引入才行，如我的页面所示：

<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <h3 class="title">蘑菇博客后台管理系统</h3>
      <el-form-item prop="username">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user"/>
        </span>
        <el-input
          v-model="loginForm.username"
          name="username"
          type="text"
          auto-complete="on"
          placeholder="username"
        />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"/>
        </span>
        <el-input
          :type="pwdType"
          v-model="loginForm.password"
          name="password"
          auto-complete="on"
          placeholder="password"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye"/>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >登 录</el-button>
      </el-form-item>
    </el-form>
    <!--引入粒子特效-->
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>
  </div>
</template>

参考

vue-particles官方地址：https://vue-particles.netlify.com/

wangbo / LearningNotes

蘑菇博客后台登录页面增加粒子特效

前言

添加粒子特效

引入时需要注意

参考

简介

发行版

贡献者

近期动态

wangbo / LearningNotes .gitee-modal { width: 500px !important; }

蘑菇博客后台登录页面增加粒子特效

前言

添加粒子特效

引入时需要注意

参考

简介

发行版

贡献者

近期动态

搜索帮助

wangbo / LearningNotes