简易登录页面

最新推荐文章于 2024-05-31 10:24:04 发布
最新推荐文章于 2024-05-31 10:24:04 发布
阅读量344 收藏
点赞数 1
分类专栏： web实践案例 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/127299964
版权

html

<body>
<div class="login">
    <div class="header">登录</div>
    <div class="container">
        <input type="text" placeholder="请输入用户名">
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
    <div class="container1">
        <input type="password" placeholder="请输入密码">
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
    <div class="btn">登录</div>
</div>
</body>

css

  * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
            height: 100%;
        }
        .login {
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #282c34;
        }
        .header{
        font-size:38px;
        font-weight:bold;
        text-align:center;
        line-height:200px;
        color:#61dafb;
        }
        .container{
        height:30px;
        width:250px;
        position:absolute;
        left:50%;
        top:40%;
        transform:translate(-50%,-50%);
        }
        input{
        width:100%;
        height:100%;
        position:relative;
        outline:none;
        border:none;
        box-sizing:border-box;
        padding-left:5px;
        background-color:#282c34;
        color:#61dafb;
        caret-color:#61dafb;
        }
        input::placeholder{
        color:#61dafb;
        }
        span{
        position:absolute;
        content:"";
        display:block;
        background-color:#61dafb;
        transition:transform .1s ease-in-out;
        }
        .top,
        .bottom{
        left:0px;
        right:0px;
        height:2px;
        }
        .left,
        .right{
        top:0px;
        bottom:0px;
        width:2px;
        transform:scaleY(0);
        }
        .top{
        top:0px;
        tranform:scaleX(0);
        transform-origin:left center;
        transition-delay:.2s;
        }
        .left{
        left:0px;
        transform-origin:bottom center;
        transition-delay:.3s;
        }
        .bottom{
        bottom:0px;
        }
        .right{
        right:0px;
        transform-origin:top center;
        transition-delay:.1s;
        }
         input:focus ~ .right {
            transform: scaleY(1);
            transform-origin: bottom center;
        }
        input:focus ~ .left {
            transform: scaleY(1);
            transform-origin: top center;
        }
        input:focus ~ .top {
            transform: scaleY(1);
            transform-origin: right center;
        }
        .container1 {
            height: 30px;
            width: 250px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .btn {
            position: absolute;
            left: 50%;
            top: 54%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 5px;
            width: 52%;
            margin-top: 40px;
            background-color: #61dafb;
            color: #fff;
        }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
          * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
            height: 100%;
        }
        .login {
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #282c34;
        }
        .header{
        font-size:38px;
        font-weight:bold;
        text-align:center;
        line-height:200px;
        color:#61dafb;
        }
        .container{
        height:30px;
        width:250px;
        position:absolute;
        left:50%;
        top:40%;
        transform:translate(-50%,-50%);
        }
        input{
        width:100%;
        height:100%;
        position:relative;
        outline:none;
        border:none;
        box-sizing:border-box;
        padding-left:5px;
        background-color:#282c34;
        color:#61dafb;
        caret-color:#61dafb;
        }
        input::placeholder{
        color:#61dafb;
        }
        span{
        position:absolute;
        content:"";
        display:block;
        background-color:#61dafb;
        transition:transform .1s ease-in-out;
        }
        .top,
        .bottom{
        left:0px;
        right:0px;
        height:2px;
        }
        .left,
        .right{
        top:0px;
        bottom:0px;
        width:2px;
        transform:scaleY(0);
        }
        .top{
        top:0px;
        tranform:scaleX(0);
        transform-origin:left center;
        transition-delay:.2s;
        }
        .left{
        left:0px;
        transform-origin:bottom center;
        transition-delay:.3s;
        }
        .bottom{
        bottom:0px;
        }
        .right{
        right:0px;
        transform-origin:top center;
        transition-delay:.1s;
        }
         input:focus ~ .right {
            transform: scaleY(1);
            transform-origin: bottom center;
        }
        input:focus ~ .left {
            transform: scaleY(1);
            transform-origin: top center;
        }
        input:focus ~ .top {
            transform: scaleY(1);
            transform-origin: right center;
        }
        .container1 {
            height: 30px;
            width: 250px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .btn {
            position: absolute;
            left: 50%;
            top: 54%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 5px;
            width: 52%;
            margin-top: 40px;
            background-color: #61dafb;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="login">
    <div class="header">登录</div>
    <div class="container">
        <input type="text" placeholder="请输入用户名">
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
    <div class="container1">
        <input type="password" placeholder="请输入密码">
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
    <div class="btn">登录</div>
</div>
</body>
</html>

效果图
在这里插入图片描述

佳美不ERROR
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android开发简易登录界面
枫飘长安的博客
03-26 1862
Android开发简易登录界面
综合介绍Simple登陆验证组件（login）的使用
weixin_34405354的博客
04-13 787
2019独角兽企业重金招聘Python工程师标准>>> ...
QQ第三方登录
weixin_44657908的博客
07-05 1788
一、Oauth协议实现第三方登录 (一)注册成为开发者 网址：https://connect.qq.com 1.使用QQ账号登录 2.手机QQ授权登录（打开手机QQ，确认登录） 3.登录成功 4.单击应用管理，继续注册流程 1)填写QQ互联开发者信息 2)提示验证邮件已发送至上述邮箱 3)前往邮箱激活 4)注册成功 (二)创建应用、获取appid和appkey 应用接入前，需要先申...
No mapping found for HTTP request with URI [/test/login/login2.html] in Disp
热门推荐
chp891202的博客
12-16 1万+
我配置的SpringMVC，在web.xml文件中拦截的是*.html，Controller类中的方法能接受到页面请求，返回一个ModelAndView页面视图，返回htm或jsp页面都可以跳转到请求页面，同样的配置只要返回html页面就会报No mapping found for HTTP request with URI [/test/login/login2.html] in Disp，捯饬
H5简易登录界面
qq_44363897的博客
10-07 2307
H5更多知识请移步博客：https://lg666kkk.github.io/tags/ 本文参考自黑马程序员培训视频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
简易登录界面
Likeyou113的博客
12-01 3716
我们今天来做一个登录的界面，话不多说，下面跟着我来操作吧。<(￣︶￣)↗[ GO! ] 一、静态页面 1.布局 我们先在元件库里拉一个矩形出来，用时我们可以给它一些样式，圆角啊，颜色啊啥的，只要喜欢就好。 然后我们再在元件库拉两个文本框，可以在前面加上“账号”，“密码”啥的点缀一下，只要喜欢就好。 我们最好先给文本框命好名，方便查找，然后我们也可以给文本框一些样式，比如去掉边框啥的，主要好看些就好。 然后我们给文本框选择类型，我们账号默...
简易的登录界面html模板源码
12-04
简易的登录界面html模板源码
bootstrap简易登录注册页面
03-30
资源共享bootstrap简易登录注册页面
Android 简易QQ登录页面
01-03
转发请附上原文链接。点个赞再走啊~ 作者：zzuli昆山玉
vue 简易登录界面
cheng1056688317的博客
07-19 864
vue登录界面 速拿速用
Android精美登录界面设计
宝爷的专栏
08-04 1295
先看效果图：   这个Demo除了按钮、小猫和Logo是图片素材之外，其余的UI都是通过代码实现的。   一、背景   背景蓝色渐变，是通过一个xml文件来设置的。代码如下：   background_login.xml [html] view plaincopy xml version="1.0"
面试题：你怎么理解 HTML 语义化？语义化有什么优点？
Hlleo Wrold
05-31 740
（语义化是什么）HTML 语义化要求开发者，而不是像divspan等无意义的标签，这里的意义就是语义。（语义化的作用）通过使用语义化标签，开发者。（语义化举例）如header常用于定义nav常用于定义article常用于定义一篇section常用于定义aside常用于定义footer常用于定义main常用于定义等等。
HTML新春烟花盛宴
兔子王
05-21 1万+
本期小编给大家分享一场绝美的烟花盛宴，无论你用手机还是电脑都可以直接打开哦！烟花盛宴春节放烟花这个传统习俗，可是咱们古老文化中一道璀璨夺目的风景线呢！每年农历新年的到来，家家户户燃放烟花炮竹的场景，那可是热闹非凡，充满了喜庆与吉祥的气息。这习俗最早源于古代人们对新的一年的美好祝愿和对邪恶力量的驱赶。在很久很久以前，人们相信燃烧火把和竹子可以发出巨大的声响和耀眼的火花，这些都能帮助他们赶走那些可能带来病痛和灾难的瘟疫、邪灵。后来随着技术的发展，竹子内的火药被发明出来，就演变成了我们现在看到的烟花爆竹。
HTML 转义字符（escape characters）及其对应的符号（symbols）
最新发布
weixin_44929577的博客
05-31 317
以下是常见的 HTML 转义字符及其对应的符号，这些可以用于在 HTML 或 JSX 中避免解析错误和特殊字符的冲突：
说明 1px、1em、1rem、1vw、1vh 的区别
Hlleo Wrold
05-29 193
htmlvwvh。
html--全魔乱舞
stqer的博客
05-30 774
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords
HTML如何让文字底部线条不紧贴在文字下面（既在内容下方又超出内容区域）
星途码客的博客
05-28 541
如何让文字底部线条不紧贴在文字下面。简单来说就是padding和margin的区别
移动互联网项目简易登录界面
09-07
移动互联网项目的简易登录界面可以通过以下步骤实现： 1. 运行LoginData.java文件，启动客户端的登录界面。 2. 在登录界面的文本框中输入用户名和IP地址（可以使用本机的localhost）。 3. 登录后，可以输入文本并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

佳美不ERROR

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

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

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

打赏作者

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

抵扣说明：

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

余额充值