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

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

文章目录

案例一滑动样式

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账号...

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

文章目录

案例一 滑动样式

案例二 滑动样式

案例三 动态样式

案例四 普通样式

案例五 滑动样式

案例六 普通样式

具体怎么获取呢？

相关推荐

clion激活码2021【2021免费激活】

java 调用bapi_BAPI的简单实现步骤

YUV文件格式[通俗易懂]

设备树 之pinctrl[通俗易懂]

python学习–mac 下pycharm安装激活成功教程

JAVA面试题及答案整理（最新版）

发表回复

案例一滑动样式

案例二滑动样式

案例三动态样式

案例四普通样式

案例五滑动样式

案例六普通样式

设备树之pinctrl[通俗易懂]