vue 炫酷登录_vue粒子效果的登录页实现

最新推荐文章于 2024-06-16 18:56:06 发布
最新推荐文章于 2024-06-16 18:56:06 发布
阅读量3.6k 收藏
点赞数
文章标签： vue 炫酷登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39760619/article/details/113323573
版权

关键词：vue、个人博客、flask、粒子效果、登录页面

hello, 亲爱的兄弟姐妹们，时隔几天在工作之余，终于把登录页面写出来了(暂不考虑数据交互)

说起这几天的学习经历，那真是一把鼻涕一把泪。今天我就把开发过程中用到的知识点，和踩得坑

跟小伙伴们分享一下，也给想自己动手实现一个炫酷效果的小伙伴一个指引。

先给大家看下效果图：

d024fd2b0e163fa903cf28c1e434bf1d.png

登录页

下面讲下我是如何实现的。

开始之前最好先理清一个概念，什么是单页面应用(SPA)，什么是多页面应用？

这是我们做的第二个页面，这时候就要考虑是做成单页面还是多页面。本来我也不知道这个概念

毕竟不是做前端的，那为什么我又突然知道了。那是因为我踩到坑了，而且至今没有解决。

是关于单页面应用中的canvas的问题，下面有详细踩坑经历。

  • 页面内容布局

1.新建 Login.vue

weixin_39760619
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5炫酷登录页 视频背景 包含素材
04-04
在登录页的案例中，CSS可能使用了媒体查询（Media Queries）来实现响应式设计，确保页面在不同设备上都能正常显示。此外，背景视频的样式设置也很关键，包括其透明度、播放循环、全屏覆盖等效果。CSS3的新特性，如...
h5炫酷登录页面
07-04
2. **Canvas绘图**：通过canvas元素，开发者可以进行动态图形绘制，用于创建登录页面中的动画效果，如背景的流动线条或动态粒子效果。 3. **Web Storage**：localStorage和sessionStorage提供本地存储功能，可以...
炫酷登录页（Vue2+Vue3）-- 附代码
潮黯的博客
04-29 1963
（1）在项目中安装 three.js 依赖。（2）在项目中安装 Vanta JS 依赖。
vue炫酷好看的动态登陆界面
02-02
vue炫酷好看的动态登陆界面 背景是动态温和的粒子
Vue - 实现登录页面
最新发布
地理信息的专栏
06-16 203
使用Vue-cli+Vue3.0进行代码构建，实现登录页面
VUE 好看的登录页面-动态视频背景
℡メ㏑╭ァ小凯
06-04 3610
【代码】VUE 好看的登录页面-动态视频背景。
Vue登录界面精美模板分享
罗铠威的博客
05-30 6978
本篇博客主要提供vue组件之登陆组件源码，需要的朋友请自取这里是网址图像联网会显示，圆角头像（可以自己更换）这里是登陆背景网址图像，联网会显示，可以自行更换。
一个非常好看的前端Vue3登录页面
weixin_53278464的博客
10-08 9307
Login登录demo 非常好看
Vue3实现好看的登录页面
张晓健的博客
06-14 9647
【代码】非常好看的登录页面（Vue3）
Vue2 版本的粒子效果 react-particle-effect-button 的 Vue 移植 除 Vue 框架外零依赖
11-06
Vue2版本的粒子效果组件是将原本用于React的`react-particle-effect-button`移植到Vue框架中的实现。这个组件提供了一种吸引人的交互方式，当用户点击按钮时，会产生炫酷的粒子动画效果，增强了用户体验，尤其适用于...
vueparticles一个拥有粒子背景的vue组件
08-09
VueParticles 就是利用 Vue 的这些特性，将粒子动画封装成可复用的组件，使得开发者无需深入了解底层实现，即可在自己的应用中集成粒子效果。 粒子背景是一种常见的网页设计元素，常用于网站头部、登录页面或全屏...
vue网页登录界面
12-21
这个demo是在webstrom运行的vue网页静态登录界面，工具应该不是问题。关于vue的配置和运行这里没有说明，自己可以配置一下。
漂亮的登录首页 漂亮的登录页面
05-28
三个比较漂亮的登录首页, jquery实现
漂亮登录页面模版
04-15
漂亮登录页面模版 漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版
VUE+element-ui开发出的美观好看的登录/注册模板组件 集成方便
07-01
VUE+element-ui开发出的美观好看的登录/注册模板组件 集成方便,本人耗时好几周才完成的, 头发掉了不少, 4.9买不了吃亏买不了上当.请我加个鸡腿吧. 效果图博客地址: https://yinyue.blog.csdn.net/article/details/118379258
基于 Vue 实现一个酷炫的 menu插件
11-26
写在前面 最近看到一个非常酷炫的menu插件，一直想把它鼓捣成vue形式，谁让我是vue的死灰粉呢，如果这都不算爱:pensive:。:laughing:开个小玩耍，我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示 pic_1 pic2 pic_3 在线演示 live demo 2.使用介绍 项目地址:github.com/MingSeng-W/vue-bloom-menu ,clone项目到本地 a. 首先在单文件组件里引入menu组件，导入common文件夹stylus里的
vue美化登录页面
qq_47701945的博客
09-06 7346
vue登录 UI美化
【登录页星空和捂脸动画特效】vue 实现掘金登录页捂脸动画效果，css 实现登录页星空动画流星效果【通俗易懂】
seeeeeeeeeee的博客
04-18 3874
前言： 这里是展示一下做的登录页的一个好看的样式，同时也写了个下掘金登录页很有意思的捂脸小动画怎么实现的，感觉放在一起还挺好看的。 虽然不知道有没有问题，但是还是声明一下：我就是写来学习学习这种设计，以后遇到了可以直接套用这个思路，这个捂脸的图应该是人家掘金的，所以大家学习用用就好了，商用什么的如果算是侵权的话跟我没关系哈。 效果图 视频展示效果（gif不会弄，只能上传个视频看看了） vue登录页捂脸效果星空效果预览
2021-09-06 登录页面 （vue+canvas）动态粒子图
TWenYuan的博客
09-06 802
登录页面 话不多说 直接代码 <template> <div id="main"> <canvas id="myCanvas" style="background: linear-gradient(#573944, #0D285D)" ></canvas> <div class="container"> <div class="con"> <h3&
vue粒子效果登录页面
08-28
Vue粒子效果登录页面可以通过使用Vue.js和一些粒子效果库来实现。下面是一个简单的示例，使用了vue-particles库来创建粒子效果登录页面： 首先，确保你已经安装了Vue.js和vue-particles库。你可以使用npm或yarn安装它们： ``` npm install vue npm install vue-particles ``` 或者 ``` yarn add vue yarn add vue-particles ``` 接下来，在Vue组件中引入vue-particles库并使用它来创建粒子效果登录页面。你可以创建一个名为Login.vue的组件，并在其中添加以下代码： ```html <template> <div> <div id="particles"> <particles></particles> </div> <div class="login-container"> <!-- 登录表单内容 --> </div> </div> </template> <script> import Particles from "vue-particles"; export default { name: "Login", components: { Particles, }, }; </script> <style> #particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .login-container { /* 登录表单的样式 */ } </style> ``` 在上面的代码中，我们将vue-particles库引入为组件的局部组件，并将其放置在id为"particles"的div中。然后，我们在同一组件中添加了登录表单的内容。 最后，在你的应用程序中使用Login.vue组件来呈现登录页面。你可以在App.vue或任何其他主组件中使用Login组件： ```html <template> <div id="app"> <Login /> </div> </template> <script> import Login from "./components/Login.vue"; export default { name: "App", components: { Login, }, }; </script> <style> #app { /* 应用程序的样式 */ } </style> ``` 现在，你就可以通过运行你的Vue应用程序来看到具有粒子效果的登录页面了。 这只是一个简单的示例，你可以根据需要进行样式和布局的调整，并在登录表单中添加适当的字段和功能。另外，你还可以通过调整vue-particles库中的配置选项来自定义粒子效果的外观和行为。具体的配置选项可以在vue-particles的文档中找到。希望这能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值