动态化简易注册登录界面 HTML+CSS+JQ

~~码到成功

已于 2022-03-05 17:42:50 修改

阅读量4.2k

点赞数 7

文章标签： html css jquery

于 2022-03-05 17:35:55 首次发布

本文链接： https://blog.csdn.net/m0_57140509/article/details/123296184

版权

登录注册界面截图

登录和注册转换，

登录注册按钮上下浮动，界面边框及背景有不同颜色以不同速度变化，

双击会进行登录注册的切换、单击会停止动画（代码在最下面）。

图片限制5M，所以不是很清楚

小弹框的实现：

    <div class="main">
        <div class="content">
            <p>还只是个demo,不能提交数据</p>
            <span onclick="fun()">×</span>
        </div>
    </div>

        $(".btn button").click(function(){
            document.querySelector(".main").classList.toggle('active');
        })
        function fun(){
            document.querySelector(".main").classList.toggle('active');
        }

界面主要用到的技术：

HTML CSS jQuery
- css主要用到animate动画属性、伪元素 hover等等，用来实现当鼠标进入元素时，发生不同的变化，比如颜色的变浅变深等。

jQuery主要用到 css()方法进行页面动态渲染

HTML部分代码：（如需要原码，请私信我，免费提供源码）

<body>
    <div class="box">
        <div class="container">
            <!-- 登录 -->
            <div class="login" >
                <h2>登&nbsp;&nbsp;&nbsp;录</h2>
                <form action="#" method="post">
                    <div class="uap">
                        <label for="username"><i class="fa-solid fa-user"></i></label>
                        <input type="text" name="username" id="username" placeholder="Enter your name">
                    </div>
                    <div class="uap">
                        <label for="password"><i class="fa fa-lock"></i></label>
                        <input type="password" name="password" id="password" placeholder="Enter you password">
                    </div>
                    <p class="forget"><a href="#" >忘记密码?</a></p>
                    <span class="btn"><button type="button">LOGIN</button></span>
                </form>
            </div>
            <!-- 注册 -->
            <div id="regist" style="display: none;">
                <h2>注&nbsp;&nbsp;&nbsp;册</h2>
                <form action="#" method="get">
                    <div class="uap">
                        <label for="username"><i class="fa-solid fa-user"></i></label>
                        <input type="text" name="username" id="username" placeholder="Enter your name">
                    </div>
                    <div class="uap">
                        <label for="password"><i class="fa fa-lock"></i></label>
                        <input type="password" name="password" id="password" placeholder="Enter your password">
                    </div>
                    <!-- <div class="uap">
                        <label for="password1"><i class="fa fa-lock"></i></label>
                        <input type="password" name="password1" id="password" placeholder="请确认密码">
                    </div> -->
                    <div class="uap">
                        <label for="email"><i class="fa-solid fa-envelope"></i></label>
                        <input type="email" name="emali" id="email" placeholder="Enter your email">
                    </div>
                    <span class="btn"><button type="button" style="margin-top: 20px;">REGIST</button></span>
                </form>
            </div>
            <div class="zhuce">
                <button class="button" ondblclick="zhuce()" title="双击进入注册">注册</button>
                <button class="button1" ondblclick="denglu()" style="display: none;" title="双击进入登录">登录</button>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="content">
            <p>还只是个demo,不能提交数据</p>
            <span onclick="fun()">×</span>
        </div>
    </div>
    <script src="./jquery-1.7.2.js"></script>
    <script>
        
    </script>
</body>

css部分代码：（代码太长）

@keyframes movepoint1 {
  from {
    top: 90%;
  }
  to {
    top: 20%;
  }
}
@keyframes movepoint2 {
  from {
    top: 90%;
  }
  to {
    top: 20%;
  }
}
@keyframes borders {
  0% {
    background: #f368e0;
  }
  10% {
    background: #ff9f43;
  }
  20% {
    background: #ee5253;
  }
  30% {
    background: #0abde3;
  }
  40% {
    background: #10ac84;
  }
  50% {
    background: #01a3a4;
  }
  60% {
    background: #8c7ae6;
  }
  80% {
    background: #fda7df;
  }
  90% {
    background: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
  }
  100% {
    background: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
  }
}
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  background-image: linear-gradient(135deg, #C2FFD8 10%, #465EFB 100%);
}
.box {
  width: 660px;
  height: 540px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f368e0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: 15px 15px 50px 20px rgba(0, 0, 0, 0.3);
}
.container {
  width: 650px;
  height: 530px;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.container .login {
  width: 70%;
  background-image: linear-gradient(135deg, #5EFCE8 10%, #736EFE 100%);
  padding: 70px;
  transition: all 1s;
}
.container .login h2 {
  display: inline-block;
  border-bottom: 3px solid #F9F871;
  margin-bottom: 30px;
  padding-bottom: 5px;
}
.container .login input {
  display: block;
  margin-bottom: 20px;
  margin-right: 0px;
  border: none;
  outline: none;
  width: 260px;
  height: 50px;
  font-size: 18px;
  padding-left: 10px;
  background-color: transparent;
  border-bottom: 2px solid white;
  color: #57606f;
}

最后我想说自己现在在大学主要学的是后端java、但是对前端有着浓厚的兴趣，如果代码有不合理的地方、或者有更加好的方法实现同样的功能，请指正。

有任何问题、请在评论区提出或者私信我。

（如需要原码，请私信我，免费提供源码）

~~码到成功

关注关注

7
点赞
踩
36

收藏

觉得还不错? 一键收藏
10
评论
动态化简易注册登录界面 HTML+CSS+JQ

登录注册界面截图登录和注册转换登录注册按钮上下浮动，界面边框及背景有不同颜色以不同速度变化双击会进行登录注册的切换、单击会停止动画（代码在最下面）图片限制5M，所以不是很清楚小弹框的实现： <div class="main"> <div class="content"> <p>还只是个demo,不能提交数据</p> <span.
复制链接

扫一扫