相关推荐recommended
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页)
作者:mmseoamin日期:2023-11-30

一、文章引导

二、博主简介

🌏博客首页: 水香木鱼

📌专栏收录:后台管理

📑文章摘要:炫酷动态背景   vue2  自定义banner

💌木鱼寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。


三、文章内容

本期 木鱼为大家带来的是,在前端vue中实现超炫酷的动态背景【可应用与登录/注册页面、自定义banner图、全屏背景等】

👉点击进入 Vanta.js-Animated website backgrounds in a few lines of code官网,体验超炫酷背景


①、安装依赖

注意:需下载以下版本号的插件 👇

npm install vanta@0.5.24
npm install three@0.121.0

②、关键代码

height: 100vh 根据屏幕的高度去自适应 展示

 

以下为 动态案例: 与官网同步…

本次演示主要以自定义banner图 为案例,给大家去演示。

③、百鸟朝凤(动态)【BIRDS】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第1张



④、云容月貌(动态)【Fog】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第2张



⑤、桑田碧海(动态)【WAVES】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第3张



⑥、耸入云霄(动态)【CLOUDS】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第4张



⑦、未知…(动态)【CLOUDS2】

本地演示效果暂未生效,未知原因。请移步官网 查看

⑧、蜚誉全球(动态)【GLOBE】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第5张



⑨、蛛丝尘网(动态)【NET】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第6张



⑩、上串下跳(动态)【CELLS】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第7张



⑩①、云罗天网(动态)【TRUNK】

本地尝试 未出现动态效果,请移步官网

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第8张



⑩②、未知…(动态)【TOPOLOGY】

本地演示效果暂未生效,未知原因。请移步官网 查看

⑩③、未知…(动态)【DOTS】

本地演示效果暂未生效,未知原因。请移步官网 查看

⑩④、镜圆璧合(动态)【RINGS】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第9张



⑩⑤、雾里看花(动态)【HALO】

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第10张



⑩⑥、登录/注册页【动态】

为了节约时间,简单演示一下, 剩下的样式需要自行去修改。

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录注册页),在这里插入图片描述,第11张




四、程序语录

五、精彩推荐

💡前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)

💡一文图解前端WebSocket 实时通信

💡vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】

💡vue封装返回顶部组件【cv可用】

💡vue实现搜索、提交等功能【回车事件】


本篇博客文章模板唯一版权归属©水香木鱼