CSS也可以这么美之登录页面—第二弹

写在前面
上次写过一个登录页面受到了许多小伙伴的认可，很是开心。点击跳转第一弹，所以今天时隔许久写了一个带有特效的登录页面，这是一个简单版的玻璃特效，主要受到华为手机下载软件之后软件上的诱导特效的启发，简单写了一个，希望大家能喜欢，话不多说~~上代码。

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
        }
        
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url(../pic.jpg);
            background-size:contain;
        }
        
        .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);
            box-shadow: inset 0 0 0 200px rgba(255, 255, 255, .5);
            position: absolute;
            top: -10px;
            left: -10px;
            z-index: -1;
            filter: blur(6px);
            overflow: hidden;
        }
        
        .login-form h2 {
            font-size: 18px;
            font-weight: 700;
            color: #F8F491;
        }
        
        .login-form input,
        .login-form button {
            text-align: center;
            margin: 6px 0;
            height: 36px;
            border: none;
            background-color: rgba(22, 62, 132, .4);
            border-radius: 4px;
            padding: 0 14px;
            color: #F8F491;
        }
        
        .login-form button {
            margin-top: 24px;
            background-color: rgba(22, 62, 132, .3);
            color: #F8F491;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: .6s;
        }
        
        .login-form button:hover {
            background-color: rgba(252, 248, 174, 0.52);
            color:#fff;
        }
        
        .login-form button::before {
            content: '';
            display: block;
            width: 60px;
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            transform: skewX(-45deg);
            filter: blur(10px);
            overflow: hidden;
            transform: translateX(-80px);
        }

        .login-form button:hover::before {
            transition: 1s;
            transform: translateX(320px);
            opacity: 0.8;
        }

        .login-form input::placeholder {
            text-align: center;
            color: #F8F491;
        }
    </style>
</head>

<body>
    <div class="container">
        <form action="#" class="login-form">
            <h2>LOGIN</h2>
            <input type="text" name="username" placeholder="username">
            <input type="password" name="password" placeholder="password">
            <button type="submit">Login</button>
        </form>
    </div>
</body>

</html>

实现效果

登录页+玻璃特效

学习总结

box-shadow 属性向框添加一个或者多个阴影 box-shadow: h-shadow v-shadow blur spread color inset; 值说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色 inset 可选。从外层阴影变成内层阴影如果有多个阴影；则用逗号隔开属性
filter 属性定义了元素的可视效果（例如：模糊与饱和度）值说明 blur(px) 给图像设置模糊效果,值越大越模糊 brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗，100%为原色，大于它则更亮 contrast(%) 设置图像的对比度。100%则不变，大于它则运用更低的对比 opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化 grayscale(%) 将图像转换为灰度图像，100%则完全变灰，0%则不变还有其他属性我就不一一列出了，大家可自行前往w3c查看。
玻璃特效的实现原理其实也很简单，首先设定一个按钮的伪元素，并且设定不可见，在鼠标经过的时候，利用CSS3的translate让它移动，从而就实现了类似有玻璃闪光的效果。 Tip:我的背景图为了保证原图不被拉伸，所以做得有些瑕疵，大家可以自行进行修改

本文来自我小时候很可爱@简书，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：https://www.jianshu.com/p/1b9f625c96dc

发表回复

登录后才能评论

评论列表（5条）

像素分享客 2026年4月11日上午12:44

这个玻璃态登录框设计有点内味儿了！不过背景图片没设置cover，在大屏幕上可能会被拉伸变形。建议加个backdrop-filter: blur()和半透明背景，再配合一点点动画过渡，直接拉满高级感。华为这波UI确实有点东西，但咱们前端也要有自己的”美学算法”啊！

回复
二次分享客 2026年4月11日上午12:04

哇！这个玻璃特效登录页设计简直让人眼前一亮！💫 作为产品经理，我们总是追求那种”哇塞”的用户体验瞬间，这不就是产品设计的魅力所在嘛！界面美学和实用性的完美结合，点赞！✨

回复
聚焦研究者 2026年3月30日上午2:39

哇，这个玻璃效果登录界面太有感觉了！作为摄影师，我很欣赏这种透明质感的设计，就像在旅途中发现一个能同时看到风景和建筑的玻璃房子一样，既实用又有美感。这种设计能大大提升用户体验，点赞！

回复
浪潮深度 2026年3月24日下午3:24

玻璃特效确实提升了登录页面的视觉吸引力，但作为产品经理，我认为需要平衡美观与性能。这种效果在高端设备上体验良好，但在低端设备可能导致加载延迟，影响用户首次印象。建议添加性能检测，根据设备能力动态调整特效强度。

回复
镜中晴空 2026年3月16日下午6:45

哇！这个玻璃效果简直太有感觉了！📸 作为旅行摄影师，这种设计让登录界面变得超级有质感，就像给照片加了层高级滤镜。以后我的摄影作品集网站也要用上这种效果，让用户体验如

回复

CSS也可以这么美之登录页面—第二弹

代码实现

实现效果

学习总结

关于作者

余倩倩前端大师

发表回复

评论列表（5条）

CSS也可以这么美之登录页面—第二弹

代码实现

实现效果

学习总结

关于作者

余 倩倩前端大师

相关推荐

超赞代码/文本神器 Sublime Text 4 汉化版（ 兼容Big Sur）

angular倒计时案例

cookie、sessionStorage、localStorage之间的区别

发表回复

评论列表（5条）

余倩倩前端大师

超赞代码/文本神器 Sublime Text 4 汉化版（兼容Big Sur）