html5中密码怎么写,HTML5密码锁输入界面

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

background: #f2f2f2;

text-align: center;

font-family: Arial, sans-serif;

font-weight: 100

}

svg {

width: 100%;

height: 100%

}

.center {

position: absolute;

top: 50%;

left: 50%;

-ms-transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%)

}

label {

position: relative;

margin: 0 auto 25px auto;

display: inline-block

}

.padlock {

position: relative;

width: 60px;

height: 60px;

opacity: 1;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out

}

.padlock.hide {

opacity: 0

}

.padlock svg circle {

stroke: #a2a2a2

}

.padlock svg path {

fill: #a2a2a2

}

.padlock.unlock svg circle {

stroke: #1fd34a

}

.padlock.unlock svg path {

fill: #1fd34a

}

.input-icon {

position: relative;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out

}

.arrow-icon {

position: absolute;

top: 0;

right: 0;

width: 50px;

height: 100%;

background: #fff;

display: none;

z-index: -2

}

.arrow-icon.show {

display: block;

z-index: 2

}

.arrow-icon svg {

fill: #d8d8d8

}

.arrow-icon:hover svg {

fill: #444

}

.password {

position: relative;

width: 220px;

height: 45px;

letter-spacing: 0.05em;

line-height: 1em;

margin: 0;

padding: 2px 70px 2px 15px;

outline: none;

border: none;

border-radius: 1px;

font-size: 14px;

-webkit-transition: box-shadow 0.25s ease;

transition: box-shadow 0.25s ease

}

.password:focus {

-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)

}

.input-icon.unlock {

opacity: 0

}

.error-message {

width: 275px;

text-align: left;

font-size: 14px;

line-height: 1em;

background-color: #f0523d;

color: #fff;

position: absolute;

padding: 15px;

opacity: 0;

z-index: -1

}

.error-message.show {

opacity: 1

}