vue.js javascript 前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)

一、文章引导

#mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .error-icon{fill:#552222;}#mermaid-svg-9sKRaMRBkdCcbAh2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9sKRaMRBkdCcbAh2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .marker.cross{stroke:#333333;}#mermaid-svg-9sKRaMRBkdCcbAh2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9sKRaMRBkdCcbAh2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .cluster-label text{fill:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .cluster-label span{color:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .label text,#mermaid-svg-9sKRaMRBkdCcbAh2 span{fill:#333;color:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .node rect,#mermaid-svg-9sKRaMRBkdCcbAh2 .node circle,#mermaid-svg-9sKRaMRBkdCcbAh2 .node ellipse,#mermaid-svg-9sKRaMRBkdCcbAh2 .node polygon,#mermaid-svg-9sKRaMRBkdCcbAh2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9sKRaMRBkdCcbAh2 .node .label{text-align:center;}#mermaid-svg-9sKRaMRBkdCcbAh2 .node.clickable{cursor:pointer;}#mermaid-svg-9sKRaMRBkdCcbAh2 .arrowheadPath{fill:#333333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9sKRaMRBkdCcbAh2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9sKRaMRBkdCcbAh2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9sKRaMRBkdCcbAh2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9sKRaMRBkdCcbAh2 .cluster text{fill:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 .cluster span{color:#333;}#mermaid-svg-9sKRaMRBkdCcbAh2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9sKRaMRBkdCcbAh2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

前端Vue中实现超炫酷动态背景

动态演示

关键代码

安装依赖

二、博主简介

博客首页： 水香木鱼 专栏收录：后台管理 文章摘要：炫酷动态背景   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】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、程序语录

#mermaid-svg-5132NHVQndvtBKQz {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5132NHVQndvtBKQz .error-icon{fill:#552222;}#mermaid-svg-5132NHVQndvtBKQz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5132NHVQndvtBKQz .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5132NHVQndvtBKQz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5132NHVQndvtBKQz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5132NHVQndvtBKQz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5132NHVQndvtBKQz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5132NHVQndvtBKQz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5132NHVQndvtBKQz .marker.cross{stroke:#333333;}#mermaid-svg-5132NHVQndvtBKQz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5132NHVQndvtBKQz .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5132NHVQndvtBKQz .cluster-label text{fill:#333;}#mermaid-svg-5132NHVQndvtBKQz .cluster-label span{color:#333;}#mermaid-svg-5132NHVQndvtBKQz .label text,#mermaid-svg-5132NHVQndvtBKQz span{fill:#333;color:#333;}#mermaid-svg-5132NHVQndvtBKQz .node rect,#mermaid-svg-5132NHVQndvtBKQz .node circle,#mermaid-svg-5132NHVQndvtBKQz .node ellipse,#mermaid-svg-5132NHVQndvtBKQz .node polygon,#mermaid-svg-5132NHVQndvtBKQz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5132NHVQndvtBKQz .node .label{text-align:center;}#mermaid-svg-5132NHVQndvtBKQz .node.clickable{cursor:pointer;}#mermaid-svg-5132NHVQndvtBKQz .arrowheadPath{fill:#333333;}#mermaid-svg-5132NHVQndvtBKQz .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5132NHVQndvtBKQz .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5132NHVQndvtBKQz .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5132NHVQndvtBKQz .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5132NHVQndvtBKQz .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5132NHVQndvtBKQz .cluster text{fill:#333;}#mermaid-svg-5132NHVQndvtBKQz .cluster span{color:#333;}#mermaid-svg-5132NHVQndvtBKQz div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5132NHVQndvtBKQz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

程序中蕴含着很多的道理,唯有大彻大悟者方能体会其中的奥妙!

五、精彩推荐

前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配) 一文图解前端WebSocket 实时通信 vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】 vue封装返回顶部组件【cv可用】 vue实现搜索、提交等功能【回车事件】

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

精彩内容

 您阅读本篇文章共花了：