简单模仿一下炫酷的教务系统登录注册界面

最新推荐文章于 2024-10-01 23:20:42 发布
繁星日月
最新推荐文章于 2024-10-01 23:20:42 发布
阅读量203
点赞数 4
文章标签： css css3 html
本文链接：https://blog.csdn.net/m0_65810417/article/details/137158443
版权
本文详细描述了如何使用HTML、CSS和JavaScript实现一个带有动态背景切换、注册与登录表单的网页设计，包括样式设置、布局动画和界面转换功能。
摘要由CSDN通过智能技术生成
以下为该网页的源代码:
html+css+js实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎光临！</title>
    <style>
        /* 大体的样式设置 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        /* 自定义字体 */
        @font-face{
            font-family: myFontStyle;
            src: url("../项目/mudlife-maayj.otf");
        }
        .font-style-my{
            font-size: 50px;
            font-family: myFontStyle;
        }
        /* 登录的背景页面 */
        body::before{
            content: "";
            position: absolute;
            inset: 0;
            background: url("../01.html/image/yemian.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }
        /* 注册的背景页面 */
        body::after{
            content: "";
            position: absolute;
            inset: 0;
            background: url("./bg1.png");
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: 0.5s;
        }
        /* 将id为signup的标签的透明度设置为完全不透明 */
        body.signup::after{
            opacity: 1;
        }
        /* 登录方框容器 */
        .container{
            position: absolute;
            width: 340px;
            height: 350px;
            border-radius: 15px;
            box-shadow: 0 15px 20px 25px rgba(65, 16, 16, 0.25);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: 0.5s;
        }
        /* 定义切换注册界面时的方框的大小 */
        body.signup .container{
            height: 500px;
            width: 400px;
        }
        /* 在方框的容器外侧加入类似走马灯的效果样式 */
        .container::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            /* 使用repeating-conic-gradient的函数
            创建一个重复的从中心向外辐射的渐变效果 */
            background: repeating-conic-gradient(from var(--a),#3e216d 0%,#541ab9 10%,transparent 10%,transparent 80%,#7d1bd2 100%);
            border-radius: 20px;
            animation: animate 2.5s linear infinite;
        }
        body.signup .container::before{
            filter: hue-rotate(140deg);
        } 
        @property --a{
            /* 指定--a的类型 */
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }
        @keyframes animate{
            0%{
                --a:0deg;
            }
            100%{
                --a:360deg;
            }
        }
        .container span{
            position: absolute;
            inset: 5px;
            overflow: hidden;
            border-radius: 15px;
        }
        .container span::before{
            content: "";
            position: absolute;
            /* 设置长度 应用所有边*/
            inset: 5px;
            background: url("../01.html/image/yemian.jpg");background-attachment: fixed;
            background-size: cover;
            background-position: center;
            /* 背景模糊设置 */
            filter: blur(10px);
        }
        .container span::after{
            content: "";
            position: absolute;
            /* 设置长度 应用所有边*/
            inset: 5px;
            background: url("../01.html/image/yemian.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            filter: blur(15px);
        }
        /* 设置背景图片样式，不会随着页面滚动 */
        body.signup .container span::before,
        body.signup .container span::after{
            background: url("./bg1.png");
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }
        form{
            position: absolute;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            /* 设置间距 */
            gap: 15px;
            transition: 0.5s;
        }
        form#signUp{
            left: 400%;
        }
        body.signup form#sign{
            left: -400%;
        } 
        body.signup form#signUp{
            left: 0;
        }
        form h2{
            position:relative;
            font-size: 30px;
            color: antiquewhite;
            /* 调整login字母之间的间距 */
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 500;
        }
        form h4{
            position: relative;
            color: antiquewhite;
        }
        form .inputBox{
            position: relative;
            width: 70%;
            display: flex;
            justify-content: space-between; 
        }
        form .inputBox a{
            color: white;
            text-decoration: none;
            font-size: 20%;
        }
        form .inputBox a:nth-child(2){
            text-decoration: underline;
        }
        form .inputBox input{
            width: 100%;
            outline: none;
            border: 1px solid grey;
            background: rgba(255, 255, 255, 0.25);
            padding: 6px 15px;
            font-size: 15px;
            border-radius: 50px;
            color: aliceblue;
        }
        form .inputBox input::placeholder{
            color: rgba(255, 255, 255, 0.25);
        }
        form .inputBox input[type="submit"]{
            background: rgb(178, 137, 210);
            font-weight: 100;
            /* 改变鼠标点击样式 */
            cursor: pointer;
        }
        form#signUp .inputBox input[type="submit"]{
            background: #541ab9;
        }
        form#signUp b{
            font-weight: 500;
            color: aqua;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <span></span>
        <span></span>
        <span></span>
        /* 创建登录的表单 */
        <form id="sign">
            <h2>LOGIN</h2>  
            <h4>教务管理系统</h4>  
            <div class="inputBox">
                    <input type="text" placeholder="username">
            </div>
            <div class="inputBox">
                    <input type="password" placeholder="password">
            </div>
            <div class="inputBox Group">
                    <a href="#">忘记密码！</a>
                    <a href="#" id="signup">注册！</a>
            </div>
            <div class="inputBox">
                    <input type="submit" value="登录">
            </div>
        </form> 

        /* 创建注册表单 */
        <form id="signUp">
            <h2>Registion</h2>  
            <h4>教务管理系统</h4>  
            <div class="inputBox">
                    <input type="text" placeholder="username">
            </div>
            <div class="inputBox">
                    <input type="password" placeholder="Create password">
            </div>
            <div class="inputBox">
                    <input type="password" placeholder="Confirm password">
            </div>
            <div class="inputBox">
                    <input type="text" placeholder="Email Address">
            </div>
            <div class="inputBox">
                    <input type="submit" value="注册">
            </div>
            <div class="inputBox Group"> 
                <a href="#">已经存在账户？<b id="signin">Login</b></a>
            </div>
        </form>
    </div>
    /* 用于登录界面和注册界面的转换，当注册和登录被点击时，通过动画来切换两个界面 */
    <script>
        let signup=document.querySelector('#signup');
        let signin=document.querySelector('#signin');
        let body=document.querySelector('body');
        signup.onclick=function(){
            body.classList.add('signup');
        }    
        signin.onclick=function(){
            body.classList.remove('signup');
        }    
    </script>
</body>
</html>
运行效果：
20240328_225555