html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

尋鯨錄

2024 年 11 月 29 日

2 次浏览

暂无评论

6048字数

技术分享前端开发

AI摘要

使用HTML和CSS技术，打造出既美观又透明的登录页面，通过HTML代码实现页面布局，CSS则用于添加炫酷效果，提升用户体验。

此内容根据文章生成，仅用于文章内容的解释与总结

🎨 超美渐变登录页 | 完整代码分享

CSS3渐变动画效果，毛玻璃质感登录页

🖼️ 效果预览

登录页效果图

📁 文件结构

登录页项目/
├── index.html          # HTML结构
├── style.css           # CSS样式文件（重命名为你自己的）
└── README.md          # 使用说明

💻 HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">  <!-- 修改为你的CSS文件名 -->
    <title>登录页面</title>
</head>
<body>
    <section>
        <!-- 背景渐变效果 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        
        <div class="box">
            <!-- 动态背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            
            <!-- 登录表单 -->
            <div class="container">
                <div class="form">
                    <h2>用户登录</h2>
                    <form>
                        <div class="inputBox">
                            <input type="text" placeholder="请输入用户名" required>
                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="请输入密码" required>
                        </div>
                        <div class="inputBox">
                            <input type="submit" value="立即登录">
                        </div>
                        <p class="forget">
                            <a href="#">忘记密码？</a>
                        </p>
                        <p class="forget">
                            <a href="#">立即注册</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

🎨 CSS代码

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 主体布局 */
section {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景渐变颜色 */
section .color {
    position: absolute;
    filter: blur(200px);
}

section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

/* 主容器 */
.box {
    position: relative;
}

/* 动态背景圆 */
.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: hue-rotate(calc(var(--x) * 70deg));
    animation: animate 10s linear infinite;
    animation-delay: calc(var(--x) * -1s);
}

/* 背景圆动画 */
@keyframes animate {
    0%, 100% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

/* 背景圆位置和大小 */
.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

/* 登录框样式 */
.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* 表单样式 */
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}

.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}

.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}

.form h2:hover:before {
    width: 53px;
}

.form .inputBox {
    width: 100%;
    margin-top: 20px;
}

.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
    color: #fff;
}

.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.form .inputBox input[type="submit"]:hover {
    background: #f1f1f1;
    transform: translateY(-2px);
}

.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}

.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.forget a:hover {
    color: #ff359b;
}

🛠️ 使用说明

快速开始步骤

重命名CSS文件：将代码中的 style.css 改为你自己的文件名
创建文件：新建 index.html 和 style.css
复制代码：将上述代码分别复制到对应文件
本地测试：用浏览器打开 index.html

技术亮点

CSS3渐变：使用linear-gradient创建梦幻背景
毛玻璃效果：backdrop-filter实现半透明模糊
CSS动画：动态背景圆和悬停效果
响应式：完美适配各种屏幕尺寸

个性化建议

修改颜色：调整CSS中的渐变颜色值
更换字体：修改 font-family 属性
添加Logo：在表单上方插入图片
表单验证：添加JavaScript验证逻辑

提示：基于CSS3的现代登录页设计，可直接复制使用

html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

尋鯨錄 • 2024 年 11 月 29 日

html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

🎨 超美渐变登录页 | 完整代码分享

🖼️ 效果预览

📁 文件结构

💻 HTML代码

🎨 CSS代码

🛠️ 使用说明

快速开始步骤

技术亮点

个性化建议

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

宝塔Nginx环境下在服务端解决跨域问题(No 'Access-Control-Allow-Origin')

短信宝—简单api对接发送信息

两行代码就能适应任何屏幕？

简单图床

Typecho joe主题美化手机侧边栏图标颜色修改

动态404页面

前端提交POST，防止刷新问题

个人赞赏页面

“小曲一响，航天登场”

html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

🎨 超美渐变登录页 | 完整代码分享

🖼️ 效果预览

📁 文件结构

💻 HTML代码

🎨 CSS代码

🛠️ 使用说明

快速开始步骤

技术亮点

个性化建议

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款