用HTML+CSS构建一个绚丽的登录页面

已于 2023-01-13 20:51:49 修改
阅读量1.3k 收藏 25
点赞数 17
分类专栏： CSS常见小案例 文章标签： css html 前端
于 2022-12-25 20:43:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51447496/article/details/128437921
版权

用HTML+CSS构建一个绚丽的登录页面

参考文章：
动态水滴页面
自动切换背景的登录页面

登录页面代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body{
            background: url(./images/樱花.png);
            /* 设置背景铺满 */
            background-repeat:no-repeat;
            background-size:100%;

        }
        form{            
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 设置透明度 */
            opacity: 80%;

            text-align: center;
            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }

        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 300px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }

        /* 筛选input标签中 type为"submit"的 进行渲染*/
        input[type="submit"]{
            /* 设置宽高 */
            width: 110px;
            height: 40px;

            /* 内部文本居中 */
            text-align: center;

            /* 圆角边框 */
            border-radius: 5px;

            /* 设置字体 */
            font:16px "黑体";

            /* 设置背景颜色 */
            background-color: #C0C6CB;
        }
        a {
            /* 去除下划线 */
            text-decoration: none;
        }

        a:hover {
            /* 悬空的时候有被选中的样子 出现下划线*/
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <form>
        <p>用户名<br />
            <input type="text" class="textinput" placeholder="请输入用户名" />
        </p>
        <p>密码<br />
            <input type="password" class="textinput" placeholder="请输入密码" />
        </p>
        <p>
            <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
        </p>
        <p>
            <input type="submit" value="登录" />
        </p>
        <p class="smtxt">还没有账户？<a href="注册界面.html">注册</a></a>

        </p>
    </form>
</body>

</html>

添加JS逻辑

<script>
        // 定义图片资源数组
        var imgs = ["images/1.jpg","images/2.jpg", "images/3.jpg", "images/4.jpg"]
        // 获取body元素
        // 添加自动切换背景的函数
        // 定义当前的index
        let index = 0;
        // 每隔一秒换一张背景
        setInterval(function(){
            index += 1;
            index = index % 4;
            document.body.style.background = 'url(' + this.imgs[index] + ')';            
        }, 1000);

    </script>

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body{
            background: url("https://pic3.zhimg.com/v2-92879d7d6ddae16c6c880bf936a2b2ae_r.jpg");
            /* 设置背景铺满 */
            background-repeat:no-repeat;
            background-size:100%;
			
        }
        form{            
            /* 设置form大小 */
            width: 400px;
            height: 250px;

            /* 加个背景颜色 */
            background-color: #E1E9EF;

            /* 设置透明度 */
            opacity: 80%;

            text-align: center;
            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 120px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下120px 然后左右居中 */
            margin: 120px auto;
        }

        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 300px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }

        /* 筛选input标签中 type为"submit"的 进行渲染*/
        input[type="submit"]{
            /* 设置宽高 */
            width: 110px;
            height: 40px;

            /* 内部文本居中 */
            text-align: center;

            /* 圆角边框 */
            border-radius: 5px;

            /* 设置字体 */
            font:16px "黑体";

            /* 设置背景颜色 */
            background-color: #C0C6CB;
        }
        a {
            /* 去除下划线 */
            text-decoration: none;
        }

        a:hover {
            /* 悬空的时候有被选中的样子 出现下划线*/
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <form>
        <p>用户名<br />
            <input type="text" class="textinput" placeholder="请输入用户名" />
        </p>
        <p>密码<br />
            <input type="password" class="textinput" placeholder="请输入密码" />
        </p>
        <p>
            <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
        </p>
        <p>
            <input type="submit" value="登录" />
        </p>
        <p class="smtxt">还没有账户？<a href="注册界面.html">注册</a></a>

        </p>
    </form>
    <script>
        // 定义图片资源数组
        var imgs = ["images/1.jpg","images/2.jpg", "images/3.jpg", "images/4.jpg"]
        // 获取body元素
        // 添加自动切换背景的函数
        // 定义当前的index
        let index = 0;
        // 每隔5秒换一张背景
        setInterval(function(){
            index += 1;
            index = index % 4;
            document.body.style.background = 'url(' + this.imgs[index] + ')';            
        }, 5000);

    </script>
</body>

</html>

此时的效果：
在这里插入图片描述

加上水滴渲染

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body{
            background: url("https://pic3.zhimg.com/v2-92879d7d6ddae16c6c880bf936a2b2ae_r.jpg");
            /* 设置背景铺满 */
            background-repeat:no-repeat;
            background-size:100%;

        }
        form{            

            /* 设置透明度 */
            opacity: 80%;

            text-align: center;
            /* 再设置内边距 使得内容更偏向于中央位置 */
            /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
            /* 但是会撑大盒子 */
            padding: 0px 100px;

            /* 设置文本文字的大小 */
            font-size: 18px;

            /* 添加圆角边框 */
            border-radius: 10px;

            /* 增加外边距 */
            /* 上下80px 然后左右居中 */
            margin: 80px auto;
        }


        .textinput{
            /* 设置宽高 */
            height: 40px;
            width: 100px;

            /* 设置内边距 */
            padding: 0 35px;

            /* 去除边框 */
            border: none;

            /* 设置背景颜色 */
            background: #F8F9F9;

            /* 设置字体大小 */
            font-size: 15px;

            /* 给文本框加上阴影 */
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

            /* 给文本框加上圆角边框 */
            border-radius: 5px;

            /* 给文本框中输入文字加上颜色 */
            color: saddlebrown;
        }

        /* 筛选input标签中 type为"submit"的 进行渲染*/
        input[type="submit"]{
            /* 设置宽高 */
            width: 110px;
            height: 40px;

            /* 内部文本居中 */
            text-align: center;

            /* 圆角边框 */
            border-radius: 5px;

            /* 设置字体 */
            font:16px "黑体";

            /* 设置背景颜色 */
            background-color: #C0C6CB;
        }


        a {
            /* 去除下划线 */
            text-decoration: none;
        }

        a:hover {
            /* 悬空的时候有被选中的样子 出现下划线*/
            text-decoration: underline;
        }
        .main {
            /* 设置为绝对定位 */
            position: absolute;
            /* 设置盒子放在中间的位置 */
            left: 50%;
            top: 50%;
            /* 设置动态效果 */
            transform: translate(-50%, -50%);
            /* 设置盒子大小 */
            width: 400px;
            height: 400px;
            /* 把边框算入盒子大小 */
            box-sizing: border-box;
            border-radius: 50%;
            /* 背景透明 */
            background: transparent;
            /* 设置阴影边框 */
            box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8);
            /* 设置动画效果 */
            animation: move 6s linear infinite;
        }

        .main::after {
            position: absolute;
            content: "";
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.5);
            left: 80px;
            top: 80px;
            border-radius: 50%;
            animation: move2 6s linear infinite;
            filter:blur(1px);
        }

        .main::before {
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.5);
            left: 130px;
            top: 70px;
            border-radius: 50%;
            animation: move3 6s linear infinite;
            filter:blur(1px);
        }

        /* 设置移动方位 */
        @keyframes move {
            50% {
                border-radius: 50% 50% 66% 34% / 26% 62% 38% 74% ;
            }
            75% {
                border-radius: 750% 50% 49% 51% / 26% 62% 38% 74% ;
            }
            25% {
                border-radius: 50% 50% 49% 51% / 52% 62% 38% 48% ;
            }
        }
    </style>
</head>

<body>
    <div class="main">
        <form>
            <p>用户名<br />
                <input type="text" class="textinput" placeholder="请输入用户名" />
            </p>
            <p>密码<br />
                <input type="password" class="textinput" placeholder="请输入密码" />
            </p>
            <p>
                <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
            </p>
            <p>
                <input type="submit" value="登录" />
            </p>
            <p class="smtxt">还没有账户？<a href="注册界面.html">注册</a></a>
        </form>
    </div>    
</body>
<script>
        // 定义图片资源数组
        var imgs = ["ihttps://pic2.zhimg.com/v2-9142793b20533b5e2e5cc91eab9ee101_r.jpg","https://pic1.zhimg.com/v2-abdc2de175b7bf0ed358ee5828cdf858_r.jpg", "https://pic2.zhimg.com/v2-168c35bda16e110ecf9b4aa6e97d0b01_r.jpg", "https://pic2.zhimg.com/v2-dcc1ea1a8b0c398c826ef9469d1e8b96.jpg"]
        // 获取body元素
        // 添加自动切换背景的函数
        // 定义当前的index
        let index = 0;
        // 每隔一秒换一张背景
        setInterval(function(){
            index += 1;
            index = index % 4;
            document.body.style.background = 'url(' + this.imgs[index] + ')';            
        }, 5000);

    </script>
</html>

最后效果

直接复制代码即可。
在这里插入图片描述

极客李华
关注
  • 17
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
10个jQuery+CSS3动画菜单 超绚丽.zip
01-09
10个jQuery+CSS3动画菜单 超绚丽.若需要使用到自己的软件项目中，需要稍加修改，不修改可能会有冲突。
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html好看的登录界面2（十四种风格登录源码）_html登录页面
最新发布
2301_82243626的博客
04-28 2429
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 12万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
叶绿体不忘呼吸
12-30 6345
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码，拿来即可用。
基于 HTML5/CSS3 制作漂亮的登录页面
老T的专栏
09-29 7972
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5是互联网的下一代标准，被认为是互联网的核心技术之一。CSS3是CSS（层叠样式表）技术的升级版本，CSS3原CSS基础上新增了很多新特征。
CSS day12 移动端布局练习
qq_34620296的博客
09-13 720
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
jQuery+HTML5+CSS3绚丽变换组合特效代码
03-20
"jQuery+HTML5+CSS3绚丽变换组合特效代码"是一个利用这三种技术构建的图片展示应用，它将图片以组合照片墙的形式呈现，为用户提供动态、丰富的视觉体验。 jQuery，作为JavaScript的一个轻量级库，简化了DOM操作、...
jQuery+HTML5+CSS3绚丽变换组合.zip
11-19
首先，jQuery是一个高效、简洁的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。jQuery的核心优势在于其易用性和跨浏览器兼容性，使得开发者可以更快速地编写动态和交互性强的网页。...
jQuery+CSS3绚丽动画菜单.zip
11-19
首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、Ajax交互以及动画效果。在创建动画菜单时，jQuery的`.animate()`方法是关键，可以用于平滑地改变HTML元素的CSS属性，如宽度、高度、位置等，从而...
十款好看的html登陆模板
07-27
精挑细选个人感觉还不错的十款HTML登陆模板，拿到手自己修改一下就可以用作自己的页面登陆
登陆界面模板（HTML5+CSS3）.zip
05-29
html简单登录界面模板,采用HTML5和CSS３，可以用来学习。
DIV CSS简单登录界面模板.zip
05-27
DIV CSS简单登录界面模板，DIV CSS布局，有用户名、密码登录框，登录按钮。
非常好好看的几个登录页面（html，css）2
10-23
非常好好看的几个登录页面（html，css）2 非常好好看的几个登录页面（html，css）2 非常好好看的几个登录页面（html，css）2
简约美观登录界面（html+css+js）
01-12
调用必应壁纸API实现每日自动更新背景，正则表达式匹配输入，一键实现夜间模式
2023跨年烟花代码（纯html + css + js）
01-10
标题中的“2023跨年烟花代码”指的是一个使用HTML、CSS和JavaScript技术实现的交互式网页特效，它在新年到来之际展示出绚丽的烟花绽放效果，为庆祝新的一年增添喜庆氛围。这个项目的特点是它完全基于前端技术，不...
HTML+CSS实现简单登录界面
woloveself的博客
06-27 1803
无
CSS编写登录框样式
nothing
04-06 594
CSS编写登录框样式
用html+css写一个淘宝登录页面
05-23
以下是一个简单的淘宝登录页面的 HTML 和 CSS 代码示例： HTML代码： ```html <!DOCTYPE html> <html> 淘宝登录 <link rel="stylesheet" type="text/css" href="style.css"> 淘宝登录 用户名 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客李华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值