第SpringBoot實(shí)現(xiàn)人臉識別等多種登錄方式目錄1.前端界面實(shí)現(xiàn)2.手機(jī)驗(yàn)證碼登錄3.人臉識別登錄(百度人臉識別)

1.前端界面實(shí)現(xiàn)

①背景閃爍效果：

!--背景星星閃爍效果--

script

window.onload=function(){

//屏幕的尺寸

varscreenW=document.documentElement.clientWidth;

varscreenH=document.documentElement.clientHeight;

//2.動態(tài)創(chuàng)建多個(gè)星星

for(vari=0;ii++){

varspan=document.createElement('span');

document.body.appendChild(span);

console.log(i);

//位置隨機(jī)

varx=parseInt(Math.random()*screenW);

vary=parseInt(Math.random()*screenH);

span.style.left=x+'px';

span.style.top=y+'px';

width:2px;

height:2px;

border-radius:5px;

background-color:whitesmoke;

position:absolute;

top:0;

left:0;

backface-visibility:hidden;

//大小隨機(jī)

varscale=Math.random()*2;

span.style.transform='scale('+scale+','+scale+')';

//頻率隨機(jī)

varrate=Math.random()*1.5;

span.style.animationDelay=rate+'s';

/script

②翻頁效果實(shí)現(xiàn)

.shu{

position:relative;

width:300px;

height:400px;

background-color:rgba(255,255,255,0.774);

transform-style:preserve-3d;

box-shadow:300px0px30pxrgb(0,0,0.6)inset;

transition:1scubic-bezier(.79,.34,.47,.92);

.shu::after{

content:'';

position:absolute;

height:3px;

width:303px;

left:0px;

bottom:-3px;

/*background-color:rgb(100,96,96);*/

background-image:linear-gradient(toright,rgb(71,68,68),rgba(124,120,120,0.3));

border-bottom-left-radius:5px;

.shu::before{

content:'';

position:absolute;

width:3px;

height:100%;

right:-3px;

top:0px;

background-color:rgb(112,108,108);

background-image:linear-gradient(totop,rgb(114,111,111),rgba(90,87,87,0.5));;

border-top-right-radius:3px;

.shu:hover{

box-shadow:30px0px30pxrgb(0,0,0.6)inset;

transform:rotate(-5deg);

.shu:hover.feng{

transform:rotateY(-140deg);

.feng{

position:absolute;

width:100%;

height:100%;

z-index:2;

background:url("../../images/img_4.png");

background-size:100%;

transform-origin:left;

transition:1scubic-bezier(.79,.34,.47,.92);

border-top-left-radius:2px;

border-bottom-left-radius:2px;

.wen{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

font-family:'fangsong';

text-align:left;

border:solidblack1px;

font-weight:bold;

transform-origin:left;/*旋轉(zhuǎn)軸*/

transition:1scubic-bezier(.79,.34,.47,.92);/*旋轉(zhuǎn)曲線*/

border-top-left-radius:2px;

border-bottom-left-radius:2px;;

}

divid="shu"

divid="feng"/div

divid="wen1"

h1id="register"用戶注冊/h1

h1id="faceregister"人臉注冊/h1

h1id="facelogin"人臉登錄/h1

h1id="numlogin"賬號登錄/h1

h1id="mailorphonelogin"郵箱/手機(jī)號登錄/h1

h1id="resetpwd"忘記密碼/h1

/div

divid="wen2"

!--用戶注冊--

divid="contain1"

h1用戶注冊/h1

form

div

inputid="num1"type="text"requiredlay-verify="required"placeholder="賬號"size="20"

/div

div

inputid="phone1"type="text"requiredlay-verify="required|phone"placeholder="手機(jī)號"size="20"

/div

div

inputid="mailbox1"type="text"requiredlay-verify="required|email"placeholder="郵箱"size="20"

/div

div

iid="show1"#xe6af;/i

inputid="pwd1"type="password"requiredlay-verify="required"placeholder="密碼"size="20"

/div

div

div

buttonid="btnofregister"type="button"lay-submit注冊/button

/div

/div

/form

/div

!--賬號登錄--

divid="contain2"

h1賬號登錄/h1

form

div

inputid="num2"type="text"requiredlay-verify="required"placeholder="賬號"size="20"

pid="tipofnum"/p

/div

div

iid="show2"#xe6af;/i

inputid="pwd2"type="password"requiredlay-verify="required"placeholder="密碼"size="20"

pid="tipofpwd"/p

/div

div

div

buttonid="btnofnumlogin"type="button"lay-submit登錄/button

/div

/div

/form

/div

!--郵箱/手機(jī)號登錄--

divid="contain3"

h1郵箱/手機(jī)號登錄/h1

form

div

inputid="mailboxorphone"type="text"requiredlay-verify="required"placeholder="郵箱/手機(jī)號"size="20"

pid="tipofmop"/p

/div

div

inputid="yzm1"type="text"requiredlay-verify="required"placeh