html如何显示密码,仅CSS显示密码

css

html {

height: 100%;

}

body {

background: #6FA5F6;

width: 100%;

height: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

.password {

width: 350px;

height: 75px;

background: #121727;

border-radius: 10px;

position: relative;

overflow: hidden;

-webkit-box-shadow: 0 0 12px 0px rgba(1, 1, 1, 0.25);

box-shadow: 0 0 12px 0px rgba(1, 1, 1, 0.25);

}

.password--background {

background: #FEFEFE;

position: absolute;

width: 150%;

height: 100%;

right: -50%;

top: 0;

-webkit-transition: .20s all ease-in-out;

transition: .20s all ease-in-out;

border-radius: 5px;

}

.password--visibleToggle {

position: absolute;

width: 50px;

height: 50px;

right: 10px;

top: 10px;

z-index: 1;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

outline: none;

}

.password--visibleToggle-eye {

width: 25px;

height: 25px;

position: absolute;

right: 25px;

top: 25px;

-webkit-perspective: 1000px;

perspective: 1000px;

overflow: hidden;

}

.password--visibleToggle-eye.close {

-webkit-transition: .4s all ease-in-out;

transition: .4s all ease-in-out;

}

.password--visibleToggle-eye.open {

-webkit-transition: .2s .2s all ease-out;

transition: .2s .2s all ease-out;

}

.password--visibleToggle-eye img {

width: 100%;

}

.password--lock {

width: 20px;

height: 20px;

fill: #111;

-webkit-transition: all .5s;

transition: all .5s;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

left: 25px;

}

.password--input {

background: none;

border: none;

color: #575DBF;

position: absolute;

width: 200px;

left: 60px;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

font-size: 18px;

letter-spacing: 2px;

-webkit-transition: all .5s;

transition: all .5s;

outline: none;

font-family: 'Open Sans Condensed', sans-serif;

-webkit-text-security: none;

}

.password--input:focus {

border-bottom: 1px solid;

}

.password--visibleToggle:checked ~ .password--background {

width: 50px;

height: 50px;

border-radius: 50%;

right: 12.5px;

top: 12.5px;

}

.password--visibleToggle:checked ~ .password--input {

-webkit-text-security: circle;

}

.password--visibleToggle:checked ~ .password--lock {

fill: #fff;

}

.password--visibleToggle:checked ~ .password--visibleToggle-eye.close {

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

.password--visibleToggle:checked ~ .password--visibleToggle-eye.open {

opacity: 0;

}