HTML+CSS+JS 实现登录注册界面[通俗易懂]

HTML+CSS+JS 实现登录注册界面[通俗易懂]文章目录案例一滑动样式案例一滑动样式login.html<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>Login</title><linkrel=”stylesheet”href=”default.css”></head><body><divclass=”

大家好,又见面了,我是你们的朋友全栈君。

案例一 滑动样式

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
<div class="page">

    <div class="panel">
        <div class="panel_visible">
            <!--注册表单-->
            <div class="panel_content">
                <h1 class="panel_title">  Sign Up </h1>
                <form class="form">
                    <label class="form_label" for="username">Username</label>
                    <input class="form_input" type="text" id="username" name="username">
                    <label class="form_label" for="password">Password</label>
                    <input class="form_input " type="password" id="password" name="password">
                    <label class="form_label" for="truename">True Name</label>
                    <input class="form_input" type="text" id="truename" name="fullname">
                    <button class="form_btn" type="button" value="Submit">Submit</button>
                    <button class="form_toggle js-formToggle" type="button">Or, Sign In</button>
                </form>
            </div>
            <!--登录表单-->
            <div class="panel_content panel_content-overlay js-panel_content ">
                <h1 class="panel_title">  Sign In </h1>
                <form class="form">
                    <label class="form_label" for="usernameIn">Username</label>
                    <input class="form_input" type="text" id="usernameIn" name="usernameIn">
                    <label class="form_label" for="passwordIn">Password</label>
                    <input class="form_input " type="password" id="passwordIn" name="passwordIn">
                    <button class="form_btn" type="button" value="Submit">Sign In</button>
                    <br>
                    <button class="form_toggle js-formToggle" type="button">Or, Sign Up</button>
                </form>
            </div>
        </div>
        <div class="panel_back js-imageAnimate">
            <img class="panel_img" src="login.jpg" style="width: 235px;height: 457px" />
        </div>
    </div>

</div>
<script src="main.js"></script>
</body>
</html>

main.js

var toggleBtns = document.querySelectorAll('.js-formToggle');
for(var i = 0; i < toggleBtns.length; i++){ 
   
    toggleBtns[i].addEventListener("click",toggleForm);
}


var firstClick = true;

function toggleForm(){ 
   

    if(!firstClick){ 
   
        document.querySelector('.js-imageAnimate').classList.toggle("animate");
        document.querySelector('.js-imageAnimate').classList.toggle("animateOut");


        document.querySelector('.js-panel_content').classList.toggle("animate");
        document.querySelector('.js-panel_content').classList.toggle("animateOut");
    }
    else{ 
   
        firstClick = false;
        document.querySelector('.js-imageAnimate').classList.add("animate");
        document.querySelector('.js-panel_content').classList.add("animate");

    }
}

背景图:

HTML+CSS+JS 实现登录注册界面[通俗易懂]
default.css

body, html{ 
   
    font-family: Ariel, sans-serif;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    display:inline-block;
}
.page{ 
   
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background-color: #0f95b0;
}
.panel{ 
   

    display:inline-block;
    position:relative;
}

.panel_visible{ 
   
    position:relative;

    overflow: hidden;
}
.panel_title{ 
   
    margin-top: .5em;
    margin-bottom: 1.2em;
}



.panel_content{ 
   
    padding: 20px;
    background-color: white;
    z-index:10;
    position:relative;
}
.panel_content-overlay{ 
   
    position:absolute;
    top:0;
    left:100%;
    height:100%;
}

.panel_content.animate{ 
   

    animation: movePanel 2s forwards ;
}

@keyframes movePanel{ 
   

    0%, 30%{ 
   
        transform: translateX(0%);

    }
    35%, 100%{ 
   
        transform: translateX(-100%);

    }

}
.panel_content.animateOut{ 
   

    animation: movePanelOut 2s forwards ;
}
@keyframes movePanelOut{ 
   
    0%, 30%{ 
   
        transform: translateX(-100%);

    }
    35%, 100%{ 
   
        transform: translateX(0%);

    }
}
.panel_back{ 
   
    position:absolute;
    z-index:0;
    top:50%;
    left: 0;
    width:110%;
    transform: translate(70%,-50%);
}

.panel_back.animate{ 
   

    animation: move 2s forwards ;
}

@keyframes move{ 
   
0%{ 
   
    transform: translate(70%,-50%);
    z-index:0;
}
15%{ 
   
    transform: translate(140%,-50%);
    z-index:10;
}
75%{ 
   
    transform: translate(-120%,-50%);
    z-index:10;
}
100%{ 
   
    transform: translate(-50%,-50%);
    z-index:0;
}
}
.panel_back.animateOut{ 
   
    transform: translate(-50%,-50%);
    animation: moveOut 2s forwards ;
}
@keyframes moveOut{ 
   
0%{ 
   
    transform: translate(-50%,-50%);
    z-index:0;
}
15%{ 
   
    transform: translate(-120%,-50%);
    z-index:10;
}
75%{ 
   
    transform: translate(140%,-50%);
    z-index:10;
}
100%{ 
   
    transform: translate(70%,-50%);
    z-index:0;
}



}
.panel_img{ 
   
    width:100%;
    display:block;
}

/* Form */
.form{ 
   
    box-sizing:border-box;
}
.form_label{ 
   
    display:block;
    color: #3D3D3D;
    font-weight: 600;
    margin-bottom: 5px;
}
.form_input{ 
   
    border-radius: 3px;
    background-color: #f2f2f2 ;
    box-shadow: 0px 2px 2px #D6D6D6;
    border:none;
    padding: 2%;
    margin-bottom: 15px;
    width: 250px;
    box-sizing:border-box;
    position:relative;
}
.form_input:focus{ 
   
    box-shadow: none;
    outline-color: #0f95b0;
}

.form_input::after{ 
   
    /* TODO: make this after portion work */
    content: "?️";
    position:absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    background-color: red;
}
.form_btn{ 
   
    margin-top: 1.2em;
    margin-bottom: 2em;
    display:block;
    width:100%;
    background-color: #0f95b0;
    color: white;
    border:none;
    padding: .6em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.1em;
    border-radius: 3px;
    cursor: pointer;
}

.form_toggle{ 
   
    background-color: transparent;
    border: none;
    padding: 0;
    margin:0;
    font-size: 1.1em;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}
.form_toggle:hover{ 
   
    border-bottom: 1px solid #0f95b0;
}
.form_toggle:focus{ 
   
    outline: none;
    border-bottom: 1px solid #0f95b0;
}

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

案例二 滑动样式

style.css

*{ 
   
    padding: 0;
    margin:0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

/* 设置整个表单参数 (父盒子)*/

section { 
   
    position: relative;
    min-height: 100vh;
    background: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

section .container { 
   
    position: relative;
    width: 800px;
    height: 500px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

section .container .user{ 
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

/* 更改图片 (左侧)*/
section .container .imgBx{ 
   
    position: relative;
    width: 50%;
    height: 100%;
    /* background: #fff; */
    transition: .5s;
}

section .container .user .imgBx img{ 
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右侧表单盒子 */

section .container .user .formBx { 
   
    position: relative;
    width: 50%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    transition: .5s;
}

/* h2 */

section .container .user .formBx form h2{ 
   
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;/*大小*/
    letter-spacing: 2px;/* 间距*/
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    color: #555;
}

/* 表单文字属性 */

section .container .user .formBx form input{ 
   
    position: relative;
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    color: #333;
    border: none;
    outline:none;
    box-shadow:none;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing:1px;
    font-weight: 300;
}

/* 为登录设置样式 */

section .container .user .formBx form input[type="submit"]{ 
   
    max-width: 100px;
    background: #677eff;
    color:#fff;
    cursor:pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: .5s;
} 

/* 没有账号时 */

section .container .user .formBx form .signup{ 
   
    position: relative;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
    text-transform: uppercase;
    font-weight: 300;
}

section .container .user .formBx form .signup a{ 
   
    font-weight: 600;
    text-decoration: none;
    color: #677eff;
}
section .container .singupBx { 
   
    pointer-events: none;
}

section .container.active .singupBx { 
   
    pointer-events: initial;
}

section .container .singupBx .formBx { 
   
    left: 100%;
}

section .container.active .singupBx .formBx { 
   
    left: 0;
}

section .container .singupBx .imgBx { 
   
    left: -100%;
}

section .container.active .singupBx .imgBx { 
   
    left: 0;
}


section .container .singinBx .formBx { 
   
    left: 0;
}

section .container.active .singinBx .formBx { 
   
    left: 100%;
}

section .container .singinBx .imgBx { 
   
    left: 0;
}

section .container.active .singinBx .imgBx { 
   
    left: 100%;
}

@media (max-width: 991px) { 
   
    section .container { 
   
        max-width: 400px;
    }

    section .container .imgBx { 
   
        display: none;
    }

    section .container .user .formBx { 
   
        width: none;
    }
}

First.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
    <section>
        
        <!-- 登录 -->

        <div class="container">
            <div class="user singinBx">
                <div class="imgBx"><img src="img/1.jpg" alt=""></div>
                <div class="formBx">
                    <form action="">
                        <h2>登录</h2>
                        <input type="text" name="" placeholder="用户名">
                        <input type="password" name="" placeholder="密码">
                        <input type="submit" name="" value="登录">
                        <p class="signup">没有账号?<a href="#" onclick="topggleForm();">注册</a></p>
                    </form>
                </div>
            </div>

            <!-- 注册 -->

            <div class="user singupBx">
                <div class="formBx">
                    <form action="">
                        <h2>注册</h2>
                        <input type="text" name="" placeholder="用户名">
                        <input type="email" name="" placeholder="邮箱地址">
                        <input type="password" name="" placeholder="密码">
                        <input type="password" name="" placeholder="再次输入密码">
                        <input type="submit" name="" value="注册">
                        <p class="signup">已有账号?<a href="#" onclick="topggleForm();">登录</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="img/2.jpg" alt=""></div>
            </div>

        </div>
    </section>
    <script type="text/javascript"> function topggleForm(){ 
     var container = document.querySelector('.container'); container.classList.toggle('active'); } </script>
</body>
</html>

img图片:
favicon.ico
在这里插入图片描述
1.jpg
在这里插入图片描述
2.jpg
在这里插入图片描述
效果图:
在这里插入图片描述
在这里插入图片描述

案例三 动态样式

index.html

<!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-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
</head>

<body>
    <div id='app' class="container">
        <img src="./1.jpeg" />
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span :class='{ 
    "active": active === "login"}' @click='go("login")'>登陆</span>
                    <span>/</span>
                    <span :class='{ 
    "active": active === "register"}' @click='go("register")'>注册</span>
                </div>
                <div class='form' id="fromLogin">
                    <template v-if='active === "register"'>
                        <div class="input"><input type="text" name="email" id='email' /><label for="email">邮箱</label></div>
                        <div class="input"><input type="text" name="Username" id="username" /><label for="username">用户名</label></div>
                        <div class="input"><input type="password" name="Password" id="Password" /><label for="Password">密码</label></div>
                        <div class="input"><input type="password" name="repeat" id="Passwordrepeat" /><label for="Passwordrepeat">重复密码</label></div>
                    </template>

                    <template v-if='active === "login"'>
                        <div class="input"><input type="text" name="Username" id="username" /><label for="username">用户名</label></div>
                        <div class="input"><input type="password" name="Password" id="Password" /><label for="Password">密码</label></div>
                    </template>

                    <span>忘记?</span>

                    <button type="submit">登陆</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script> var vue = new Vue({ 
     el: '#app', data: { 
     active: 'login' }, methods: { 
     go (type) { 
     this.active = type } }, beforeMount () { 
     } }) </script>

</html>

style.css

* { 
   
    margin: 0;
    padding: 0;
}

body { 
   
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: miaowu;
    background: linear-gradient(45deg, rgb(80, 150, 250), rgb(245, 189, 253)) fixed;
}

.container { 
   
    position: relative;
    width: 70rem;
}

.container img { 
   
    width: 70rem;
}

.switch span { 
   
    color: #ccc;
    font-size: 1.4rem;
    cursor: pointer;
}

.switch span.active { 
   
    color: rgb(181, 154, 254);
}

.panel { 
   
    width: 30%;
    margin: 10rem 0 0;
    position: absolute;
    right: 0;
    top: 0;

    display: flex;
    justify-content: center;
}

.form { 
   
    width: 12rem;
    margin: 3rem 0 0;
}

.form .input { 
   
    position: relative;
    opacity: 1;
    height: 2rem;
    width: 100%;
    margin: 2rem 0;
    transition: .4s;
}

.input input { 
   
    outline: none;
    width: 100%;
    border: none;
    border-bottom: .1rem solid rgb(181, 154, 254);
    position: relative;
    line-height: 35px;
    background: transparent;
    z-index: 1;
}

.input label { 
   
    position: absolute;
    left: 0;
    top: 20%;
    font-size: 1.2rem;
    color: rgb(129, 101, 207);
    transition: .3s;
}   

.input input:focus ~ label { 
   
    top: -50%;
    font-size: .9rem;
}



.form span { 
   
    display: block;
    color: rgb(110, 89, 167);
    font-size: .8rem;
    cursor: pointer;
}

.form button { 
   
    border: none;
    outline: none;
    margin: 2.5rem 0 0;
    width: 100%;
    height: 3rem;
    border-radius: 3rem;
    background: linear-gradient(90deg, rgb(181, 154, 254), rgb(245, 189, 253));
    box-shadow: 0 0 8px rgb(181, 154, 254);
    cursor: pointer;
    color: white;
    font-family: miaowu;
}

#live2dcanvas { 
   
    border: 0 !important;
}

背景图:
在这里插入图片描述

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

在这里插入图片描述

案例四 普通样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <style> body { 
     /* 设置边距,可以设置四个方向,分别是 上 右 下 左 */ margin: 0; /* 填充 也是可以设置四个方向,同上 */ padding: 0; /* 设置字体风格 */ font-family: sans-serif; /* 设置背景颜色 */ background: lightsteelblue; } .box { 
     width: 300px; padding: 40px; /* 绝对定位,通过这个可以使元素放在页面的任何一个位置上 */ position: absolute; /* 以下三行代码实现了块元素在百分比下居中 可以参考: https://www.cnblogs.com/knuzy/p/9993181.html */ top: 50%; left: 50%; transform: translate(-50% , -50%); /* 设置登陆界面的背景颜色 */ background-color: cornflowerblue; /* 规定标签中元素属性为 text 的居中 */ text-align: center; } .box h1 { 
     color: #349; /* 控制文本大小写 */ text-transform: uppercase; font-size: 500; } /* 选中输入账号密码的框框 */ .box input[type="text"], .box input[type="password"] { 
     border: 0; background: none; display: block; /* 第一个参数定上下 20px 第二个auto自动适配 */ margin: 20px auto; /* 文本居中 */ text-align: center; /* 设置边框大小和颜色 */ border: 2px solid #3498db; /* 两个参数分别对应 高 和 宽 */ padding: 14px 10px; /* 设置边框为宽 */ width: 200px; /* 边框对应的属性分别有三个 https://www.w3school.com.cn/cssref/pr_outline.asp */ outline: none; color: white; /* 边框的半径 更圆润*/ border-radius: 24px; /* 设置动画的过渡时间 */ transition: 0.25s; } /* 设置变化后的界面 */ .box input[type="text"]:focus, .box input[type="password"]:focus { 
     width: 280px; border-color: #2ecc71; } .box input[type="submit"] { 
     border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; outline: none; color: black; border-radius: 24px; transition: 0.25s; } .box input[type="submit"]:hover { 
     background: #2ecc71; } </style>
</head>
<body>
    <!-- 表格元素 相关属性可参考: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form -->
    <from class="box" action = "login.html" method="post">
        <h1 >codestep</h1>
        <input type = "text" name = "" placeholder="Username" >
        <input type = "password" name = "" placeholder="Password">
        <input type="submit" value = "Login">
    </from>
</body>
</html>

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

案例五 滑动样式

<!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-UA-Compatible" content="ie=edge" />
    <title>Login</title>
    <style> * { 
     font-family: 'montserrat', sans-serif; } body { 
     margin: 0; padding: 0; background: #333; } .login-box { 
     position: absolute; top: 0; left: -100%; width: 100%; height: 100vh; /* vh 视口高度 viewport height 百分比单位*/ background-image: linear-gradient( 45deg, #9fbaa8, #31354c ); /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/ transition: 0.4s; /*过度效果 property duration timing-function delay 默认属性:all 0 ease 0*/ } .login-form { 
     position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*定义 2D 转换8 */ color: white; text-align: center; } .login-form h1 { 
     font-weight: 400; margin-top: 0; } .txtb { 
     display: block; box-sizing: border-box; width: 240px; background: #ffffff28; border: 1px solid white; padding: 10px 20px; color: white; outline: none; margin: 10px 0; border-radius: 6px; text-align: center; } .login-btn { 
     width: 240px; background: #2c3e50; border: 0; color: white; padding: 10px; border-radius: 6px; cursor: pointer; } .hide-login-btn { 
     color: #000; position: absolute; top: 40px; right: 40px; cursor: pointer; font-size: 30px; opacity: 0.7; transform: rotate(45deg); /*定义 2D 转换8 */ } .show-login-btn { 
     position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; border: 2px solid; padding: 10px; cursor: pointer; } .showed { 
     left: 0; } </style>
</head>
<body>
<div class="show-login-btn">
    -> Show Login Form
</div>

<div class="login-box">
    <div class="hide-login-btn">
        +
    </div>
    <form action="index.html" method="POST" class="login-form">
        <h1>Welcome</h1>
        <input class="txtb" type="text" name="" placeholder="Username" />
        <input class="txtb" type="password" name="" placeholder="Password" />
        <input class="login-btn" type="submit" name="" value="Login" disabled />
    </form>
</div>
<script type="text/javascript"> function hasClass(element, clssname) { 
     return element.className.match(new RegExp('(\\s|^)' + clssname + '(\\s|$)')) } function addClass(element, clssname) { 
     if (!this.hasClass(element, clssname)) element.className += ' ' + clssname } function removeClass(element, clssname) { 
     if (hasClass(element, clssname)) { 
     var reg = new RegExp('(\\s|^)' + clssname + '(\\s|$)') element.className = element.className.replace(reg, ' ') } } function toggleClass(element, clssname) { 
     if (hasClass(element, clssname)) { 
     removeClass(element, clssname) } else { 
     addClass(element, clssname) } } var loginBox = document.getElementsByClassName('login-box') var showBtn = document.getElementsByClassName('show-login-btn') var hideBtn = document.getElementsByClassName('hide-login-btn') showBtn[0].addEventListener('click', function() { 
     toggleClass(loginBox[0], 'showed') }) hideBtn[0].addEventListener('click', function() { 
     toggleClass(loginBox[0], 'showed') }) </script>
</body>
</html>

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

案例六 普通样式

login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<title>登录界面</title>
	</head>
	<body>
		<div id="bigBox">
			<h1>LOGIN</h1>
			<div class="inputBox">
				<div class="inputText">
					<span class="iconfont icon-nickname"></span>
					<input type="text" placeholder="Username" />
				</div>
				<div class="inputText">
					<span class="iconfont icon-visible"></span>
					<input type="password" placeholder="Password" />
				</div>
			</div>
			<input class="loginButton" type="button" value="Login" />
		</div>
	</body>
</html>

style.css

body
{ 
   
	margin: 0;
	padding: 0;
	background-image: url(../img/bglogin.png);	/* 背景图片 */
	background-repeat: no-repeat;	/* 背景图片不重复 */
}

#bigBox
{ 
   
	margin: 0 auto;	/* login框剧中 */
	margin-top: 200px; /* login框与顶部的距离 */
	padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */
	background-color: #00000090;	/* login框背景颜色和透明度 */
	width: 400px;
	height: 300px;
	border-radius: 10px;	/* 圆角边 */
	text-align: center;	/* 框内所有内容剧中 */
}

#bigBox h1
{ 
   
	color: white;	/* LOGIN字体颜色 */
}

#bigBox .inputBox
{ 
   
	margin-top: 50px;	/* 输入框顶部与LOGIN标题的间距 */
}

#bigBox .inputBox .inputText
{ 
   
	margin-top: 20px;	/* 输入框之间的距离 */
}

#bigBox .inputBox .inputText span
{ 
   
	color: white;	/* icon颜色 */
}

#bigBox .inputBox .inputText input
{ 
   
	border: 0;	/* 删除输入框边框 */
	padding: 10px 10px;	/* 输入框内的间距 */
	border-bottom: 1px solid white;	/* 输入框白色下划线 */
	background-color: #00000000;	/* 输入框透明 */
	color: white;	/* 输入字体的颜色 */
}

#bigBox .loginButton
{ 
   
	margin-top: 30px;	/* 按钮顶部与输入框的距离 */
	width: 150px;
	height: 25px;
	color: white;	/* 按钮字体颜色 */
	border: 0; /* 删除按钮边框 */
	border-radius: 20px;	/* 按钮圆角边 */
	background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);	/* 按钮颜色 */
}

iconfont.css

@font-face { 
   font-family: "iconfont";
  src: url('iconfont.eot?t=1591106386397'); /* IE9 */
  src: url('iconfont.eot?t=1591106386397#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAACCgAAAOVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEDIM4ATYCJAMMCwgABCAFhG0HPBsEB1GUDUqS7IckiWBsgSKJ5iIQA3MI4geKAwAAlgIQD19j7f3dvUMtQRJNHn26aJJEYoiEToIQxUIheSdEpnsms/x+7VRC3R1ElWSaNOmT7YvvDbzSSY3SaIQIoTG0rs5YPKzkCKMdmFhnZl8Ihekb28ETv33fz7o4nDbF5zc4pzmmRl2AcUABjb0swQJKkHuIV7u0w15PoF6fKeXl/dOLUktBuwXiMPBUqZVSKTXZoVaolowt4kxdbTpJfpz6349fEyEhqWS078rBni1tfpx/3fAd/w7XLgJ7PAP4SWSMKynEbqlpRzUMjauqV0W1+uSqIqSxvP//+CxNUDX/8EiCqKKZjWCYCNNJsW1WLL5Bzlmzb65zFXW4U/ImqTtRmqq8rTVL84YCiXK964MkBwBChhC37GSmaAaSZCIxivE4l2FIEkKCE4+PJJNjXMSMJhepAICiEKKrGWaMhIBoAYhLZOh2Bu7SzZGtAqIe0SYcGUlQiUgCUTVo/TnJjVvc95HI5Yi3TFFIQg4HkA28Mz+KSzM0xiMcdSST3vj0UzjDecQXy46LKNurEblFc0L3gGbB7yd2/6rYfSSsEoO2lVGueUc76Qd5FBr4XjBRXGr52LLO3SgfmellnsiUfeLOjkZD4cMQHi4vxEFvmweWxo5OZvix0VJYMQTybB2X8TbsGqooxPqHm3j4sdDQ2N6Fh17hMYUVnLuDgqKukpbs4WGWHRlWt5QUdhL9OpNfZny4NlGbb7prFux5BkrDntnR4Yvm72lYnjz7vL23GnzeXB3LWuqPt09ct8c9GsyblVq+Zb7y8lN/4+H2amVv2PFX2y3g/ef9DBVFu3RqJVqzfyG7ZUnRuFSdi8KyWYY7O/KbDAlkCDr/xNbur7+lSyk2hFqBjZDU6IWsVj+yYMehosEUVNWag3pjDiY36MCqotRh1AdAaPUFSbNXyFr9IAv2Fyq6/UNVa/Ch3lbo52wwGJudLkYlaEG/QGCylCytdILsM/QeYsVJro+7QnaBF+Zn5rLRA0yRxxjgHr0FEQLiLIF92AzjOIOcsxCNzPgi+cbsLJW9aMZkSaljCUOKQBbQXoCAkUmRW1l0cp8/gzwPYgrXFFXpryDmBLWDeTPmWiAPRGmromu5xHnkWSAEAYRlEmAfDCg2QxmQl7cKIUPM8HsEchtmSTlqK5qZX5I83yqoR4/JkSJHUXMcuEDH2NoLTJSqBEslAAAA') format('woff2'),
  url('iconfont.woff?t=1591106386397') format('woff'),
  url('iconfont.ttf?t=1591106386397') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1591106386397#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont { 
   
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-visible:before { 
   
  content: "\e6a2";
}

.icon-nickname:before { 
   
  content: "\e6a0";
}

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

具体怎么获取呢?

鉴于小伙伴们没有csdn积分,我把代码压缩成了一个压缩包,放在了gitee上面,需要的请点击下载
点击下载

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/162713.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Faster-rcnn详解「建议收藏」

    Faster-rcnn详解「建议收藏」论文题目:FasterR-CNN:TowardsReal-TimeObjectDetectionwithRegionProposalNetworks论文链接:论文链接论文代码:Matlab版本点击此处,Python版本点击此处作为一个目标检测领域的baseline算法,Faster-rcnn值得你去仔细理解里面的细节,如果你能深入的了解这些,我相信你会受益匪浅。…

  • Java工程师定位

    Java工程师定位Java工程师定位

  • python用turtle画夏日海边

    python用turtle画夏日海边

  • 2021山东安全员c证考试题库_安全管理员试题库C2

    2021山东安全员c证考试题库_安全管理员试题库C2题库来源:安全生产模拟考试一点通公众号小程序2022年山东省安全员C证考题为山东省安全员C证复训题库高频考题覆盖!2022年山东省安全员C证考试题模拟考试题库及在线模拟考试根据山东省安全员C证新版教材大纲编写。山东省安全员C证理论题库通过安全生产模拟考试一点通上练习全部题库。1、【多选题】动臂变幅幅度限制装置功能通过空载运动目测及査验计算书的方式进行。()査验计算书有此状态臂架防后翻能力验算。(ABDE)A、吊钩空载B、臂架内变幅到设计最大仰角C、臂架内变幅到设计最大幅度…

  • LOJ#2076. 「JSOI2016」炸弹攻击(模拟退火)

    LOJ#2076. 「JSOI2016」炸弹攻击(模拟退火)

  • idea21.1 激活码-激活码分享

    (idea21.1 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号