• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    html5登录玻璃界面特效

    发布者: 土豆服务器 | 发布时间: 2025-6-16 12:16| 查看数: 35| 评论数: 0|帖子模式

    本文主要介绍了html5登录玻璃界面特效，废话不多说，具体如下：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge"></meta>
    7.     <title>Document</title>
    8.     <style>
    9.         html,
    10.         body {
    11.             margin: 0;
    12.             padding: 0;
    13.             font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
    14.         }
    15.         .container {
    16.             width: 100vw;
    17.             height: 100vh;
    18.             display: flex;
    19.             align-items: center;
    20.             justify-content: center;
    21.             background: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.8lHGYyoBPuSLsS6yFB5ACwHaEK?w=321&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7") fixed no-repeat;
    22.             background-size: cover;
    23.         }
    24.         .login-form {
    25.             width: 240px;
    26.             height: 220px;
    27.             display: flex;
    28.             flex-direction: column;
    29.             padding: 40px;
    30.             text-align: center;
    31.             position: relative;
    32.             z-index: 100;
    33.             background: inherit;
    34.             border-radius: 18px;
    35.             overflow: hidden;
    36.         }
    37.         .login-form::before {
    38.             content: "";
    39.             width: calc(100% + 20px);
    40.             height: calc(100% + 20px);
    41.             background: inherit;
    42.             box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25);
    43.             position: absolute;
    44.             top: -10px;
    45.             left: -10px;
    46.             z-index: -1;
    47.             filter: blur(6px);
    48.             overflow: hidden;
    49.         }
    50.         .login-form h2 {
    51.             font-size: 18px;
    52.             font-weight: 400;
    53.             color: #3d5245;
    54.         }
    55.         .login-form input,
    56.         .login-form button {
    57.             margin: 6px 0;
    58.             height: 36px;
    59.             border: none;
    60.             background-color: rgba(255, 255, 255, 0.3);
    61.             border-radius: 4px;
    62.             padding: 0 14px;
    63.             color: #3d5245;
    64.         }
    65.         .login-form input::placeholder {
    66.             color: #3d5245;
    67.         }
    68.         .login-form button {
    69.             margin-top: 24px;
    70.             background-color: rgba(57, 88, 69, 0.4);
    71.             color: white;
    72.             position: relative;
    73.             overflow: hidden;
    74.             cursor: pointer;
    75.             transition: 0.4s;
    76.         }
    77.         .login-form button:hover {
    78.             background-color: rgba(12, 80, 38, 0.67);
    79.         }
    80.         .login-form button::before,
    81.         .login-form button::after {
    82.             content: "";
    83.             display: block;
    84.             width: 80px;
    85.             height: 100%;
    86.             background: rgba(179, 255, 210, 0.5);
    87.             opacity: 0.5;
    88.             position: absolute;
    89.             left: 0;
    90.             top: 0;
    91.             transform: skewX(-15deg);
    92.             filter: blur(30px);
    93.             overflow: hidden;
    94.             transform: translateX(-100px);
    95.         }
    96.         .login-form button::after {
    97.             width: 40px;
    98.             background: rgba(179, 255, 210, 0.3);
    99.             left: 60px;
    100.             filter: blur(5px);
    101.             opacity: 0;
    102.         }
    103.         .login-form button:hover::before {
    104.             transition: 1s;
    105.             transform: translateX(320px);
    106.             opacity: 0.7;
    107.         }
    108.         .login-form button:hover::after {
    109.             transition: 1s;
    110.             transform: translateX(320px);
    111.             opacity: 1;
    112.         }
    113.     </style>
    114. </head>
    115. <body>
    116.     <div>
    117.         <div class="container">
    118.             <form action="#" class="login-form">
    119.                 <h2>登录</h2>
    120.                 <input type="text" name="username" placeholder="用户名">
    121.                 <input type="password" name="password" placeholder="密码">
    122.                 <button type="submit">登录</button>
    123.             </form>
    124.         </div>
    125.     </div>
    126. </body>
    127. </html>
    复制代码

    到此这篇关于html5登录玻璃界面特效的文章就介绍到这了,更多相关html5登录玻璃内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/916735.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表