动态背景组件（vue-particles）

启用 vue-particles 粒子背景插件（main.js）
动态背景组件（AnimatedWallpaper.vue）
使用方式
效果图

启用 vue-particles 粒子背景插件（main.js）

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

动态背景组件（AnimatedWallpaper.vue）

<template><div :style="style"><vue-particlescolor="#ffffff":particleOpacity="0.7":particlesNumber="number"shapeType="circle":particleSize="3"linesColor="#E6E6FA":linesWidth="1":lineLinked="linked":lineOpacity="0.6":linesDistance="150":moveSpeed="speed":hoverEffect="true"hoverMode="grab":clickEffect="true":clickMode="mode"></vue-particles><slot></slot></div>
</template><script>
export default {name: "AnimatedWallpaper",props: {bgImg: {type: String,default: require('@/assets/nap.jpg')},number: {type: Number,default: 50 // 100},linked: {type: Boolean,default: true // false},speed: {type: Number,default: 6 // 8},mode: {type: String,default: "push" // "repulse"}},data() {return {style: {background: 'url(' + this.bgImg + ') no-repeat top',backgroundSize: 'cover',backgroundAttachment: 'fixed',height: '100%',width: '100%',position: 'fixed',overflow: 'scroll',zIndex: -99999}}}
}
</script><style scoped>#particles-js {position: fixed;width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;z-index: -99998;}::-webkit-scrollbar {display: none;}
</style>

使用方式

<template><div>
<!--    <animated-wallpaper />--><!--    <animated-wallpaper :bg-img="require('@/assets/20_21.jpg')" />--><animated-wallpaper:number="100":linked="false":speed="8"mode="repulse":bg-img="require('@/assets/Emilia.jpg')"/></div>
</template><script>
import AnimatedWallpaper from "@/components/AnimatedWallpaper";export default {name: "Trial",components: {AnimatedWallpaper}
}
</script><style scoped></style>

效果图

动态背景组件（vue-particles）相关推荐

模仿CSDN黑暗帝国动态背景的vue项目(附源码)
开发工具:Webstorm 技术栈:vue.html.canvas 实现效果(其实这里面的是动态变换的,只是没有截成GIF动图): 实现步骤: (1)在这里的项目我是用VueCli3脚手架进行搭建的. ...
粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
项目看板开发经验分享(一)——光伏绿色能源看板（可复用组件、条件动态背景图、flex布局应用、v-for遍历列表多重绝对定位）
今天新开一个系列,专门介绍近期工作中开发的几个比较酷炫的看板的开发思路与经验分享.第一节我们就来介绍下这个光伏绿色能源看板,整体浏览如下: UED提供的原设计图,这波还原的还不错吧? 那就直接进入正题 ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
【Vue】动态添加组件的两种实现
在Vue项目中,想要动态为页面上添加组件,是一件十分容易就能够实现的事情,这必须要得益于Vue框架的强力支持! 但有时候往往就是由于事情变得简单起来后,却突然忘记了要如何去实现.这大概就是对代码走火入 ...
vue 动态背景（星海）
项目需要做个动态背景直接放代码 html部分 <canvas id="space"></canvas> css: #space {width: 100% ...

动态背景组件（vue-particles）

动态背景组件（vue-particles）

启用 vue-particles 粒子背景插件（main.js）

动态背景组件（AnimatedWallpaper.vue）

使用方式

效果图

动态背景组件（vue-particles）相关推荐

最新文章

热门文章