可显示密码原文的密码输入框效果代码-html代码-BFW代码库

代码语言：html

代码描述：可显示密码原文的密码输入框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");
body {
  -webkit-box-align: center;
          align-items: center;
  background-color: #6fa5f5;
  display: -webkit-box;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
          justify-content: center;
}
.container {
  /* background-color: #121726; */
  /* background-color: #fff; */
  border-radius: 10px;
  height: 68px;
  overflow: hidden;
  position: relative;
  width: 340px;
}
.hidden {
  background-color: #121726;
  box-sizing: border-box;
  height: 100%;
  padding: 0 86px 0 60px;
  position: absolute;
  width: 100%;
}
.lock {
  left: 28px;
  position: absolute;
  top: 14px;
  width: 17px;
}
.lock-white {
  fill: white;
}
.lock-black {
  fill: black;
}
.hidden-input {
  background-color: transparent;
  border: 0;
  color: #575cba;
  font-family: "Space Mono", monospace;
  font-size: 18px;
  height: 100%;
  outline: none;
  width: 100%;
}
.revealed {
  background-color: #fff;
  box-sizing: border-box;
  -webkit-clip-path: polygon(
    85.39075% 28.16254%,
    85.86161% 27.31304%,
    86.33801% 26.7167%,
    86.81675% 26.36695%,
    87.29462% 26.25723%,
    87.7684% 26.38091%,
    88.23487% 26.73144%,
    88.69081% 27.30221%,
    89.13302% 28.08664%,
    89.55826% 29.07816%,
    89.96332% 30.27017%,
    90.345% 31.6561%,
    90.70007% 33.22935%,
    91.02531% 34.98333%,
    91.31751% 36.91147%,
    91.57346% 39.00718%,
    91.78992% 41.26386%,
    91.95983% 43.6181%,
    92.0791% 46.00012%,
    92.14904% 48.39386%,
    92.17099% 50.78321%,
    92.14625% 53.15209%,
    92.07615% 55.48444%,
    91.96199% 57.76415%,
    91.80511% 59.97518%,
    91.6068% 62.10138%,
    91.3684% 64.12672%,
    91.09122% 66.0351%,
    90.77657% 67.81044%,
    90.42577% 69.43666%,
    90.04014% 70.89766%,
    89.621% 72.17737%,
    89.16967% 73.25972%,
    88.69881% 74.10923%,
    88.22241% 74.70556%,
    87.74366% 75.05532%,
    87.26579% 75.16504%,
    86.79201% 75.04135%,
    86.32555% 74.69083%,
    85.86961% 74.12006%,
    85.4274% 73.33563%,
    85.00216% 72.3441%,
    84.59709% 71.15209%,
    84.21541% 69.76616%,
    83.86035% 68.19292%,
    83.53511% 66.43893%,
    83.2429% 64.51079%,
    82.98696% 62.41508%,
    82.77049% 60.1584%,
    82.60059% 57.80416%,
    82.48132% 55.42214%,
    82.41137% 53.0284%,
    82.38942% 50.63905%,
    82.41416% 48.27017%,
    82.48427% 45.93782%,
    82.59843% 43.65811%,
    82.75531% 41.4471%,
    82.95362% 39.3209%,
    83.19202% 37.29556%,
    83.4692% 35.38717%,
    83.78385% 33.61184%,
    84.13465% 31.98561%,
    84.52027% 30.5246%,
    84.93942% 29.2449%
  );
          clip-path: polygon(
    85.39075% 28.16254%,
    85.86161% 27.31304%,
    86.33801% 26.7167%,
    86.81675% 26.36695%,
    87.29462% 26.25723%,
    87.7684% 26.38091%,
    88.23487% 26.73144%,
    88.69081% 27.30221%,
    89.13302% 28.08664%,
    89.55826% 29.07816%,
    89.96332% 30.27017%,
    90.345% 31.6561%,
    90.70007% 33.22935%,
    91.02531% 34.98333%,
    91.31751% 36.91147%,
    91.57346% 39.00718%,
    91.78992% 41.26386%,
    91.95983% 43.6181%,
    92.0791% 46.00012%,
    92.14904% 48.39386%,
    92.17099% 50.78321%,
    92.14625% 53.15209%,
    92.07615% 55.48444%,
    91.96199% 57.76415%,
    91.80511% 59.97518%,
    91.6068% 62.10138%,
    91.3684% 64.12672%,
    91.09122% 66.0351%,
    90.77657% 67.81044%,
    90.42577% 69.43666%,
    90.04014% 70.89766%,
    89.621% 72.17737%,
    89.16967% 73.25972%,
    88.69881% 74.10923%,
    88.22241% 74.70556%,
    87.74366% 75.05532%,
    87.26579% 75.16504%,
    86.79201% 75.04135%,
    86.32555% 74.69083%,
    85.86961% 74.12006%,
    85.4274% 73.33563%,
    85.00216% 72.3441%,
    84.59709% 71.15209%,
    84.21541% 69.76616%,
    83.86035% 68.19292%,
    83.53511% 66.43893%,
    83.2429% 64.51079%,
    82.98696% 62.41508%,
    82.77049% 60.1584%,
    82.60059% 57.80416%,
    82.48132% 55.42214%,
    82.41137% 53.0284%,
    82.38942% 50.63905%,
    82.41416% 48.27017%,
    82.48427% 45.93782%,
    82.59843% 43.65811%,
    82.75531% 41.4471%,
    82.95362% 39.3209%,
    83.19202% 37.29556%,
    83.4692% 35.38717%,
    83.78385% 33.61184%,
    84.13465% 31.98561%,
    84.52027% 30.5246%,
    84.93942% 29.2449%
  );
  height: 100%;
  padding: 0 86px 0 60px;
  position: absolute;
  pointer-events: none;
  -webkit-transition: -webkit-clip-path 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-clip-path 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: clip-path 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: clip-path 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.revealed-input {
  border: 0;
  font-family: "Space Mono", monospace;
  font-size: 18px;
  height: 100%;
  outline: none;
  width: 100%;
}
.active .revealed {
  -webkit-clip-path: polygon(
    2.28031% 0%,
    14.21024% 0.00147%,
    26.14016% 0%,
    38.07008% 0.00147%,
    50% 0%,
    61.92992% 0.00147%,
    73.85984% 0%,
    85.78976% 0.00147%,
    97.71969% 0%,
    98.18037% 0.23084%,
    98.60894% 0.89324%,
    98.99635% 1.94205%,
    99.33358% 3.33211%,
    99.61159% 5.01825%,
    99.82135% 6.95531%,
    99.95383% 9.09814%,
    100% 11.40157%,
    100.00029% 21.05118%,
    100% 30.70079%,
    100.00029% 40.35039%,
    100% 50%,
    100.00029% 59.64961%,
    100% 69.29921%,
    100.00029% 78.94882%,
    100% 88.59843%,
    99.95383% 90.90186%,
    99.82135% 93.04469%,
    99.61159% 94.98175%,
    99.33358% 96.66789%,
    98.99635% 98.05795%,
    98.60894% 99.10676%,
    98.18037% 99.76916%,
    97.71969% 100%,
    85.78976% 100.00147%,
    73.85984% 100%,
    61.92992% 100.00147%,
    50% 100%,
    38.07008% 100.00147%,
    26.14016% 100%,
    14.21024% 100.00147%,
    2.28031% 100%,
    1.81963% 99.76916%,
    1.39106% 99.10676%,
    1.00365% 98.05795%,
    0.66642% 96.66789%,
    0.38841% 94.98175%,
    0.17865% 93.04469%,
    0.04617% 90.90186%,
    0% 88.59843%,
    0.00029% 78.94882%,
    0% 69.29921%,
    0.00029% 59.64961%,
    0% 50%,
    0.00029% 40.35039%,
    0% 30.70079%,
    0.00029% 21.05118%,
    0% 11.40157%,
    0.04617% 9.09814%,
    0.17865% 6.95531%,
    0.38841% 5.01825%,
    0.66642% 3.33211%,
    1.00365% 1.94205%,
    1.39106% 0.89324%,
    1.81963% 0.23084%
  );
          clip-path: polygon(
    2.28031% 0%,
    14.21024% 0.0.........完整代码请登录后点击上方下载按钮下载查看