vue工程:使用vue-particles实现动态粒子效果且只作为背景显示(包括样式设置)
目录一、综述二、实现过程2.1 安装vue-particles2.2 全局配置vue-particles2.3 使用 vue-particles三、具体参数说明四、样式调整,实现只作为背景4.1、根据id号调整样式4.2 根据自定义的class名称lizi设置样式一、综述为了提高页面展示效果,特别类似于登录界面内容比较单一的,粒子效果作为背景经常使...
·
目录
一、综述
为了提高页面展示效果,特别类似于登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。
二、实现过程
2.1 安装vue-particles
npm install vue-particles --save-dev
2.2 全局配置vue-particles
在main.js里面:
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
2.3 使用 vue-particles
在vue文件template标签中:
<vue-particles
id="particles-js" /* 此处可以手动定义id为默认值particles-js,也可以不写 */
/* 圆点设置: 颜色、透明度、数量、外形、大小 */
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" //此处又定义了一个类class,也可以通过它设置粒子样式
>
</vue-particles>
三、具体参数说明
color: String类型。
默认'#dedede'。粒子颜色。particleOpacity: Number类型。
默认0.7。粒子透明度。particlesNumber: Number类型。
默认80。粒子数量。shapeType: String类型。
默认'circle'。可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"。particleSize: Number类型。
默认80。单个粒子大小。linesColor: String类型。
默认'#dedede'。线条颜色。linesWidth: Number类型。
默认1。线条宽度。lineLinked: 布尔类型。
默认true。连接线是否可用。lineOpacity: Number类型。
默认0.4。线条透明度。linesDistance: Number类型。
默认150。线条距离。moveSpeed: Number类型。
默认3。粒子运动速度。hoverEffect: 布尔类型。
默认true。是否有hover特效。hoverMode: String类型。
默认true。可用的hover模式有: "grab", "repulse", "bubble"。clickEffect: 布尔类型。
默认true。是否有click特效。clickMode: String类型。
默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。
四、样式调整,实现只作为背景
4.1、根据id号调整样式
vue-particles有一个id为默认为particles-js,可以根据这个id来设置样式。
#particles-js{
width: 100%;
height: calc(100% - 100px);
position: absolute; //设置absolute,其他DIV设置为relative,这样这个例子效果就作为背景
}
4.2 根据自定义的class名称lizi设置样式
更多推荐
已为社区贡献7条内容
所有评论(0)