好看不腻的登录页和注册页[玻璃拟态化][二次元]

最新推荐文章于 2024-09-11 08:08:04 发布
最新推荐文章于 2024-09-11 08:08:04 发布
阅读量1.2k 收藏 32
点赞数 6
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Marlene_Jiang/article/details/120211275
版权

开发初衷：我正好最近我要精炼一下vue3全家桶及tailwindcss，所以我重新制作了这个webdemo，他在样式上并没有太大改变，主要包括登录页和注册页，采用vue-router4进行切换。这次还重点调整了网页的自适应，现在电脑手机都能有不错的效果。希望大家能够喜欢。

网页预览：
在这里插入图片描述
GitHub链接:https://github.com/MarleneJiang/Login_Register_Demo
(打不开的自己百度)（这是我花费我在校园内的空闲时间编写的，希望给个Star！）

Marlene_Jiang
关注
专栏目录
炫酷的动态登录页面
03-12
一个炫酷的动态登录页面，里面包含javascript,css,jquery技术。
vue炫酷好看的动态登陆界面
02-02
vue炫酷好看的动态登陆界面 背景是动态温和的粒子
使用Tailwind CSS构建真实世界用户界面的指南
最新发布
gitblog_00897的博客
09-11 611
使用Tailwind CSS构建真实世界用户界面的指南 building-realworld-user-interfaces-using-tailwind Demo of building real-world UIs using TailwindCSS ...
Vue3实现好看的登录页面
热门推荐
Mr. Zhang Xiaojian's Blog
06-14 1万+
【代码】非常好看的登录页面（Vue3）
使用vue3做的一个比较满意漂亮好看的登陆页面
06-07 7184
页面展示：分为三部分，账号登陆页，token登陆页，账号注册页。
好看的vue登录页面(附 源代码 背景图)
2302_77426533的博客
06-17 2658
confirm（）函数为后台校验相关代码。
.net vue漂亮登录界面_Flutter之撸一个漂亮的登录界面的总结
weixin_39887531的博客
11-02 475
介绍最近学习了Flutter的一些控件使用，然后在Github上面看见了一个挺漂亮的登录界面，于是就用Flutter自己模仿地实现了一下。原作者做得比较好看，不过只是单纯实现界面。所以自己加了些东西，比如Key的使用和InheritedWidget的使用。下面是一些总结，如果有说错的地方，还请各位指出来，谢谢。最终的展示界面界面代码结构每个类的名字，相信大家一看就知道对应的作用类。每个类的作用，我...
毛玻璃拟态个人引导页HTML优化版源码源码资源下载整理.zip
08-21
【毛玻璃拟态个人引导页HTML优化版源码】是一种设计风格独特的网页引导页面源代码，结合了现代设计趋势中的“毛玻璃”效果和拟态设计。这种效果通常用于网站的启动界面，以吸引用户的注意力并提供简洁的用户体验。...
HTML毛玻璃拟态UI个人主页.zip
11-08
2. CSS文件：定义了页面的样式，包括拟态UI的元素样式、颜色、布局和毛玻璃效果。 3. JavaScript文件：用于增加动态效果和交互性，例如按钮点击事件、页面滚动响应等。 4. 图像资源：如背景图片、图标等，可能应用了...
【我的前端】玻璃拟态效果实战开发：比毛玻璃更好看的CSS背景玻璃拟态效果
生产队的刘同学
08-28 803
比毛玻璃更好看的CSS背景玻璃拟态效果实战开发
新拟态个人引导页.zip
01-07
新拟态设计，又称Neumorphism，在近年来成为了UI设计领域的一种流行趋势，它结合了扁平化设计的简洁与立体感的微妙深度，为用户界面带来了全新的视觉体验。"新拟态个人引导页.zip"是一个包含此类设计元素的压缩包，...
漂亮的登录首页 漂亮的登录页面
05-28
三个比较漂亮的登录首页, jquery实现
vue网页登录界面
12-21
这个demo是在webstrom运行的vue网页静态登录界面，工具应该不是问题。关于vue的配置和运行这里没有说明，自己可以配置一下。
漂亮登录页面模版
04-15
漂亮登录页面模版 漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版
【前端实例代码】Html5+css3创建登录和注册表单~实现新拟态新拟物风格(Neumorphism)网页图标效果~手把手教学~新手必会~超简单 ~
南北极之间
08-19 471
【web前端特效源码】Html5+css3创建登录和注册表单2！实现新拟态新拟物风格(Neumorphism)网页图标效果！手把手教学！新手必会！超简单 ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！本人承接网网站开发，如有需要，欢迎私信咨询！如果您感觉文章对您有帮助~ 那就打赏一下，请笔者喝杯咖啡吧~对于每个学生来说，从高中到大学的过渡面孔有点棘手，因为他的生活正在发生不断的变化。他
vue+elementui 登录注册页面实现
kurcp的博客
11-18 9467
1.实现效果 2. 代码实现 2.1使用elementUI文档中Tabs标签页 2.2在components中新建两个文件 login.vue register.vue login.vue <template> <div class="login"> <div class="login_form"> <p&...
一般般好看的登录页面 (vue)
weixin_30521649的博客
08-09 1万+
没有ui，无奈只能自己上手设计页面。自己写了一个，半仿照其他demo写的，原demo很炫酷，我这个不炫酷也不丑吧 贴图： （星星每隔3秒改变颜色，有动画运动） 贴代码： 1 <template> 2 <div id="login"> 3 <div id="bgd"> 4 <canvas ...
vue2 登录注册，炫酷页面
m0_59163380的博客
06-28 9316
复制就用，用了都说好。
vue vanta 漂亮的登录界面
雨花石
03-15 2669
【代码】vuevanta漂亮的登录界面。
帮我用css和js做一个拟态滑动登录注册页面
05-10
好的，以下是一个简单的拟态滑动登录注册页面的样式和代码： HTML代码： ``` <div class="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>Create Account</h1> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <button>Sign Up</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>Sign in</h1> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <a href="#">Forgot your password?</a> <button>Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>Welcome Back!</h1> <p>To keep connected with us please login with your personal info</p> <button class="ghost" id="signIn">Sign In</button> </div> <div class="overlay-panel overlay-right"> <h1>Hello, Friend!</h1> <p>Enter your personal details and start journey with us</p> <button class="ghost" id="signUp">Sign Up</button> </div> </div> </div> </div> ``` CSS代码： ``` @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); * { box-sizing: border-box; } body { background-color: #f6f5f7; font-family: 'Montserrat', sans-serif; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative; overflow: hidden; width: 100%; max-width: 1000px; min-height: 560px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { background: #FF416C; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } .form-container.sign-up-container { transform: translateX(100%); opacity: 1; z-index: 2; } .form-container.sign-in-container { transform: translateX(0%); z-index: 1; } .form { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; } form input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; border-radius: 20px; border-bottom: 2px solid #fff; font-family: 'Montserrat', sans-serif; font-weight: 500; } form input:focus { outline: none; border-bottom: 2px solid #FF4B2B; } form button { background-color: #FF4B2B; color: #fff; border: none; border-radius: 20px; padding: 12px 20px; margin: 20px 0; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease-in-out; } form button:hover { background-color: #fff; color: #FF4B2B; border: 1px solid #FF4B2B; } form button.ghost { background-color: transparent; border-color: #fff; } form a { color: #8e8e8e; font-size: 14px; text-decoration: none; } form a:hover { text-decoration: underline; } .overlay-right .ghost { background-color: #fff; border-color: #fff; color: #FF4B2B; } .overlay-right .ghost:hover { background-color: #FF4B2B; color: #fff; } .overlay-right button { background-color: transparent; border-color: #fff; color: #fff; } .overlay-right button:hover { background-color: #fff; color: #FF4B2B; border-color: #fff; } ``` JavaScript代码： ``` const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.getElementById('container'); signUpButton.addEventListener('click', () => { container.classList.add('right-panel-active'); }); signInButton.addEventListener('click', () => { container.classList.remove('right-panel-active'); }); ``` 以上代码实现了一个拟态滑动登录注册页面，其中包括两个表单（登录和注册），以及一个覆盖整个页面的背景和两个覆盖表单的覆盖层。通过点击“Sign Up”或“Sign In”按钮，可以在两个表单之间进行切换，同时覆盖层和背景也会相应地滑动切换。您可以根据需要进行修改和优化。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值