CSS实现登录表单毛玻璃效果

效果图

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><div class="box"><form action="#" class="login-form"><h2>登录</h2><input type="text" name="username" id="" placeholder="用户名"><input type="text" name="password" id="" placeholder="密码 "><button type="submit">登录</button></form></div>
</body></html>

CSS代码

* {margin: 0;padding: 0;
}.box {display: flex;width: 100vw;height: 100vh;align-items: center;justify-content: center;background: url(https://coolbackgrounds.io/images/unsplash/josh-bean-medium-9501ba9f.jpg) no-repeat fixed;background-size: cover;
}.login-form {display: flex;position: relative;width: 240px;height: 220px;flex-direction: column;padding: 40px;text-align: center;z-index: 1;background: inherit;border-radius: 18px;overflow: hidden;
}.login-form::before {content: '';position: absolute;top: -10px;left: -10px;width: calc(100% + 20px);/* + 两边各有一个空格  否则 无效*/height: calc(100% + 20px);background: inherit;box-shadow: 0 0 0 200px rgba(255, 255, 255, .2) inset;z-index: -1;filter: blur(6px);overflow: hidden;
}.login-form h2 {font-size: 18px;font-weight: 400;color: #3d5245;
}.login-form input,
.login-form button {margin: 6px 0;height: 36px;background-color: rgba(255, 255, 255, .3);border: none;border-radius: 4px;padding: 0 14px;color: #3d5245;
}.login-form input::placeholder {color: #3d5245;
}.login-form button {position: relative;margin-top: 24px;background-color: rgba(57, 88, 69, .4);color: #ffffff;overflow: hidden;cursor: pointer;transition: all 0.4s;
}.login-form button:hover {background-color: rgba(12, 88, 38, 0.67);
}.login-form button::before,
.login-form button::after {content: '';display: block;width: 80px;height: 100%;background-color: rgba(179, 255, 210, .5);opacity: 0.5s;position: absolute;left: 0;top: 0;transform: skewX(-15deg);filter: blur(30px);overflow: hidden;transform: translateX(-100px);
}.login-form button::after {width: 40px;background-color: rgba(179, 255, 210, .3);left: 60px;filter: blur(5px);opacity: 0;
}.login-form button:hover::before {transition: all 1s;transform: translateX(320px);opacity: 0.7;
}.login-form button:hover::after {transition: all 1s;transform: translateX(320px);opacity: 1;
}

CSS实现登录表单毛玻璃效果相关推荐

30个最佳免费的CSS HTML登录表单模板
点击打开链接 CSS3 Login Form Template An amazing css3 login form template with only html, css features bei ...
JavaFX官方教程（六）之带有JavaFX CSS的花式表单
翻译自带有JavaFX CSS的花式表单本教程通过添加级联样式表(CSS)使您的JavaFX应用程序看起来很有吸引力.您开发设计,创建.css文件并应用新样式. 在本教程中,您将获取一个使用标签 ...
50天50个前端小项目（纯html+css+js）第八天（形成波浪动画结合登录表单）
今天来做一个结合登录表单实现的波浪动画效果,没错,你没听错,重点不是表单,是波浪. 先看效果:首先是平平无奇的波浪效果然后当你点击输入框的时候:例如输入框里的Email和Password是会一个单词 ...
【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)
直接跳到末尾获取完整源码在本文中,我将带着大家展示如何使用 HTML 和 CSS 代码创建玻璃态登录表单.你可以将任何简单的设计转换为玻璃态设计.为此,只需要更改一点代码.首先使用 backgr ...
element-ui表单_每日UI挑战强加-登录表单（分步教程）
element-ui表单 A step by step journey to create a good design from the daily UI challenge 一步步走,从日常的UI挑 ...
javafx 表单_JavaFX 2：创建登录表单
javafx 表单在本教程中,我将使用JavaFX 2和CSS设计一个外观漂亮的Login Form . 它是经典的登录表单,带有用户名和密码以及登录按钮. 为了遵循本教程,我强烈建议您查看以下这些 ...
JavaFX 2：创建登录表单
在本教程中,我将使用JavaFX 2和CSS设计漂亮的Login Form . 它是经典的登录表单,带有用户名和密码以及登录按钮. 为了遵循本教程,我强烈建议您查看以下这些教程: Eclipse ID ...
CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点: 列表最大的特点就是整齐 .整洁. 有 ...

CSS实现登录表单毛玻璃效果

效果图

html代码

CSS代码

CSS实现登录表单毛玻璃效果相关推荐

最新文章

热门文章