毛玻璃效果的登录页面

HTML：

   <div class="container"><form action="#" class="login-form"><h2>登 录</h2><inputtype="text"name="username"placeholder="用户名"/><inputtype="password"name="password"placeholder="密码"/><button type="submit">登录</button></form></div></div>

css:

*{margin: 0;padding: 0;box-sizing: border-box;
}
.container {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;background: url("/bg.png") fixed no-repeat;background-size: cover;
}.login-form {width: 240px;height: 220px;display: flex;flex-direction: column;padding: 40px;text-align: center;position: relative;z-index: 100;background: inherit;border-radius: 18px;overflow: hidden;
}.login-form::before {content: "";width: calc(100% + 20px);height: calc(100% + 20px);position: absolute;top: -10px;left: -10px;overflow: hidden;background: inherit;box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25);filter: blur(6px);
}.login-form h2 {font-size: 18px;font-weight: 400;color: #fff;
}.login-form input,
.login-form button {margin: 6px 0;height: 36px;border: none;background-color: rgba(255, 255, 255, 0.3);border-radius: 4px;padding: 0 14px;color: #3d5245;
}.login-form input::placeholder {color: #3d5245;
}.login-form button:focus,
.login-form input:focus {outline: 0;
}.login-form button {margin-top: 24px;background-color: rgba(57, 88, 69, 0.4);color: white;position: relative;overflow: hidden;cursor: pointer;transition: 0.4s;
}.login-form button:hover {background-color: rgba(12, 80, 38, 0.67);
}.login-form button:focus {outline: 0;
}.login-form button::before,
.login-form button::after {content: "";display: block;width: 80px;height: 100%;background: rgba(179, 255, 210, 0.5);opacity: 0.5;position: absolute;top: 0;left: 0;transform: skewX(-15deg);filter: blur(30px);overflow: hidden;transform: translateX(-100px);
}.login-form button::after {width: 40px;background: rgba(179, 255, 210, 0.3);left: 60px;opacity: 0;filter: blur(5px);
}.login-form button:hover::before {transition: 1s;transform: translateX(320px);opacity: 0.7;
}.login-form button:hover::after {transition: 1s;transform: translateX(320px);opacity: 1;
}

扫码下方二维码，后台回复【加载动画】即可获取所有源码

毛玻璃效果的登录页面相关推荐

周末也需要学习分享一个 Flutter 波浪波动效果的登录页面的背景 Flutter ClipPath实现的波动
优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维,不局限于思维,不局限语言限制,才是编程的最高境界. 优美的音乐节奏带你浏览这个效果的编码过程坚持每一天, ...
简单java登录页面android_Android 之路 - RxJava2+Retrofit实现简单登陆
原标题:Android 之路 - RxJava2+Retrofit实现简单登陆前言使用RxJava2+Retrofit实现简单登陆. 正文1. Hello world1.1 相关版本 Androi ...
自动切换背景的登录页面
自动切换背景的登录页面有趣的小案例池子: JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换背景 ...
【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
手把手教你制作油管上30万播放的动态登录页面效果
毕设要做个登录页面,想着做个漂亮点的页面,就找到了youtube上的一个,自己敲代码也做出来了,效果展示视频讲解链接: link. 油管视频地址 https://www.youtube.com/wa ...
Win10关闭登录面板毛玻璃效果
文章目录 Win10关闭登录面板毛玻璃效果 1.Win10非家庭版(专业版,企业版等) 2.Win10所有版本(包括家庭版) 3.Win10所有版本 4.提示 Win10关闭登录面板毛玻璃效果 Win ...
android高仿微信聊天页面,Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
css实现背景图片的毛玻璃效果
问题一 1.简述问题最近在做登录页面的时候,遇到了一个问题:将登录页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料. 2.问题解决 <!DOCTYPE html> < ...
分享一下前几个月我做的超炫的登录页面
先给大家看看登录页面的效果演示这个登录页面分为三个部分(页面切换:连续按五次V,大小写都可以) 第一个(最初的鱼儿游动页面) 登录.切换页面.和鱼儿游动这个页面的代码就不放在这里了,这个虽然是我借鉴 ...

毛玻璃效果的登录页面

毛玻璃效果的登录页面相关推荐

最新文章

热门文章