react+gsap实现密码输入强度动画显示效果代码-html代码-BFW代码库

代码语言：html
代码描述：react+gsap实现密码输入强度动画显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

#app {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}
#app .Main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(1.6) translateY(-12%);
}
#app form {
  position: relative;
  top: -18px;
}
#app .field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  width: 100%;
}
#app .field label, #app .field i {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  pointer-events: none;
}
#app .field i {
  left: 0;
  color: #bdbdbd;
  padding: 6px;
  padding-left: 18px;
  transform-origin: center;
  cursor: pointer;
}
#app .field label {
  left: 43.2px;
  font-size: 14px;
  font-family: SemplicitaPro;
  color: #bdbdbd;
}
#app .field input {
  width: 180px;
  height: 100%;
  padding-left: 43.2px;
  padding-right: 12px;
  font-size: 16px;
  border-radius: 30px;
  border: 1px solid #dbdbdb;
  font-family: SemplicitaPro;
  color: #ff79e6;
  caret-color: #dbdbdb;
  outline: none;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#app svg {
  position: relative;
  left: 6px;
  width: 100%;
  max-width: 180px;
  pointer-events: none;
}
#app svg .shield .st0 {
  fill: #ffe1f7 !important;
}
#app svg .shield .st1 {
  fill: white;
}
#app svg .shield .st2 {
  stroke: #ffe1f7;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
#app svg .crown {
  transform: scale(0.8);
  transform-origin: 50% 40%;
}
#app svg .wind-left {
  transform: scale(0.6);
  transform-origin: 20% 85%;
}
#app svg .wind-right {
  transform: scale(0.6);
  transform-origin: 80% 85%;
}
#app svg .st0 {
  fill: white;
  stroke: #892276;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
#app svg .st1 {
  fill: #ffe1f7;
}
#app svg .st2 {
  fill: #ffa6f7;
}
#app svg .st3 {
  fill: #ffa6f7;
  stroke: #892276;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
#app svg .st4 {
  fill: #ff79e6;
}
#app svg .st5 {
  fill: none;
  stroke: #892276;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

@media (max-height: 720px) {
  #app .Main {
    transform: scale(1.2) translateY(-12%);
  }
}
</style>


</head>

<body >

<div id="app"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fontawesome-kit.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin.js"></script>
      <script >
// Components

const Main = () => {
  return /*#__PURE__*/(
    React.createElement("main", { className: "Main" }, /*#__PURE__*/
    React.createElement(SVG, null), /*#__PURE__*/
    React.createElement(Form, null)));


};

const Form = () => {
  return /*#__PURE__*/(
    React.createElement("form", null, /*#__PURE__*/
    React.createElement(PasswordField, null)));


};

const PasswordField = () => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "field" }, /*#__PURE__*/
    React.createElement("label", { for: "password" }, "Password"), /*#__PURE__*/
    React.createElement("input", { type: "password", name: "password", id: "password",
      onFocus: handler,
      onBlur: handler,
      onKeyUp: handler,
      onKeyDown: handler }), /*#__PURE__*/

    React.createElement("i", { className: "fas fa-key", "data-action": "show",
      onClick: handler })));


};

const SVG = () => {
  return /*#__PURE__*/(
    React.createElement("svg", { className: "SVG", viewBox: "0 0 284.8 400.1" }, /*#__PURE__*/
    React.createElement("g", { className: "sword-right sword" }, /*#__PURE__*/
    React.createElement("g", { className: "seq-3 seq" }, /*#__PURE__*/
    React.createElement("path", {
      className: "st0",
      d: "M220.3,147.3L98,295.8c-1.4,1.7-3.2,3-5.1,3.6l-27.8,9.9c-3.7,1.3-6.9-1.4-6.3-5.2l4.7-28.6 c0.3-2,1.2-3.9,2.6-5.6l122.5-148.7L220.3,147.3" }), /*#__PURE__*/


    React.createElement("polygon", {
      className: "st1",
      points: "180.7,133.8 209.5,157.5 217.7,147.6 188.9,123.9 \t\t" }), /*#__PURE__*/

    React.createElement("path", {
      className: "st2",
      d: "M182.9,142.6l9.3,7.2c0.9,0.7,1.1,2,0.3,2.9L72,296.1c-1.3,1.6-3.9,0.4-3.6-1.7l3.4-19.3 c0.1-0.3,0.2-0.7,0.4-0.9L180,143C180.7,142.1,182,142,182.9,142.6z" })), /*#__PURE__*/



    React.createElement("g", { className: "seq-2 seq" }, /*#__PURE__*/
    React.createElement("path", {
      className: "st3",
      d: "M191.2,95.4l22.3,9.5l18,14.8l13,19.5c1.7,2.5,1.5,5.8-0.4,8.2l-5.1,6.2c-2.2,2.7-6.2,3.1-8.9,0.9l-51-42 c-2.3-1.9-2.6-5.3-0.7-7.6l6.5-7.8C186.3,95,189,94.4,191.2,95.4z" }), /*#__PURE__*/


    React.createElement("path", {
      className: "st4",
      d: "M184,106.2l3.8-4.5c0.6-0.7,1.5-0.9,2.4-0.6l15.8,5.8c0.2,0.1,0.4,0.2,0.6,0.4l6.5,5.5 c0.4,0.3,0.4,0.9,0.1,1.3l-9.6,9.8c-0.3,0.3-0.8,0.4-1.2,0.1l-18.1-14.7C183.4,108.5,183.3,107.1,184,106.2z" })), /*#__PURE__*/



    React.createElement("path", {
      className: "seq-1 seq st3",
      d: "M245.4,84.3L245.4,84.3c4.9,4.1,5.6,11.4,1.6,16.3l-15.8,19.2l-17.9-14.7L229,85.9 C233.1,80.9,240.4,80.2,245.4,84.3z" })), /*#__PURE__*/



    React.createElement("g", { className: "sword-left sword" }, /*#__PURE__*/
    React.createElement("g", { className: "seq-2 seq" }, /*#__PURE__*/
    React.createElement("path", {
      className: "st3",
      d: "M71.2,93.9L49,103.4l-18,14.8l-13,19.5c-1.7,2.5-1.5,5.8,0.4,8.2l5.1,6.2c2.2,2.7,6.2,3.1,8.9,0.9l51-42 c2.3-1.9,2.6-5.3,0.7-7.6l-6.5-7.8C76.1,93.6,73.5,92.9,71.2,93.9z" }), /*#__PURE__*/


    React.createElement("path", {
      className: "st4",
      d: "M78.4,104.7l-3.8-4.5c-0.6-0.7-1.5-0.9-2.4-0.6l-15.8,5.8c-0.2,0.1-0.5,0.2-0.6,0.4l-6.5,5.5 c-0.4,0.3-0.4,0.9-0.1,1.3l9.6,9.8c0.3,0.3,0.8,0.4,1.2,0.1l18.1-14.7C79,107,79.2,105.7,78.4,104.7z" })), /*#__PURE__*/



    React.createElement("path", {
      className: "seq-1 seq st3",
      d: "M17.1,82.8L17.1,82.8c-4.9,4.1-5.6,11.4-1.6,16.3l15.8,19.2l17.9-14.7L33.4,84.4 C29.4,79.5,22,78.7,17.1,82.8z" }), /*#__PURE__*/


    React.createElement("g", { className: "seq-3 seq" }, /*#__PURE__*/
    React.createElement("path", {
      className: "st0",
      d: "M42.1,145.8l122.3,148.5c1.4,1.7,3.2,3,5.1,3.6l27.8,9.9c3.7,1.3,6.9-1.4,6.3-5.2l-4.7-28.6 c-0.3-2-1.2-3.9-2.6-5.6L73.8,119.7L42.1,145.8" }), /*#__PURE__*/


    React.createElement("polygon", {
      className: "st1",
      points: "81.8,132.3 52.9,156 44.7,146.1 73.6,122.4 \t\t" }), /*#__PURE__*/

    React.createElement("path", {
      className: "st2",
      d: "M79.6,141.2l-9.3,7.2c-0.9,0.7-1.1,2-0.3,2.9l120.5,143.3c1.3,1.6,3.9,0.4,3.6-1.7l-3.4-19.3 c-0.1-0.3-0.2-0.7-0.4-0.9L82.4,141.5C81.7,140.6,80.5,140.5,79.6,141.2z" }))), /*#__PURE__*/




    React.createElement("g", { className: "wind-right wind" }, /*#__PURE__*/
    React.createElement("path", {
      className: "seq st5",
      d: "M215.8,312.6l16.7,16.7c0.1,0.1,0.3,0.3,0.4,0.4c1.6,1.3,10.6,7.8,17.5-0.3c0,0,5-5.5,0.4-12.1 c-0.3-0.4-0.6-0.8-1-1.1c-1.4-1.1-4.8-3.3-9-1.1c-0.3,0.2-0.7,0.4-1,0.6c-1.1,1-3.6,3.6-1.9,7.4c0.7,1.6,2.1,2.8,3.9,3.1 c0.8,0.1,1.7,0.1,2.7-0.2c3.3-1.1,1.6-4,1.6-4" }), /*#__PURE__*/



    React.createElement("path", {
      className: "seq st5",
      d: "M203.7,319.8l33.4,33.4c0,0,6.7,6.6,1.1,13.6c-0.6,0.7-1.3,1.3-2.1,1.8 c-1.2,0.7-3.2,1.4-5.6,0.9c-2.5-0.5-4.6-2.3-5.3-4.8c-0.5-1.5-0.5-3.4,1-5.3c0,0,2.2-2.8,4.9-2.2" }), /*#__PURE__*/


    React.createElement("path", {
      className: "seq st5",
      d: "M213.8,319.8l47.6,47.6c0,0,3.6,3.3,2,7.3s-6.2,5.7-8.7,3.2c-2.2-2.2-2.5-5.1-0.1-7s6.2,0.5,5,3 " })), /*#__PURE__*/



    React.createElement("g", { className: "wind-left wind" }, /*#__PURE__*/
    React.createElement("path", {
      className: "seq st5",
      d: "M49,311.4L32.3,328c-0.1,0.1-0.3,0.3-0.4,0.4c-1.6,1.3-10.6,7.8-17.5-0.3c0,0-5-5.5-0.4-12.1 c0.3-0.4,0.6-0.8,1-1.1c1.4-1.1,4.8-3.3,9-1.1c0.3,0.2,0.7,0.4,1,0.6c1.1,1,3.6,3.6,1.9,7.4c-0.7,1.6-2.1,2.8-3.9,3.1 c-0.8,0.1-1.7,0.1-2.7-0.2c-3.3-1.1-1.6-4-1.6-4" }), /*#__PURE__*/



    React.createElement("path", {
      className: "seq st5",
      d: "M61.1,318.6L27.8,352c0,0-6.7,6.6-1.1,13.6c0.6,0.7,1.3,1.3,2.1,1.8c1.2,0.7,3.2,1.4,5.6,0.9 c2.5-0.5,4.6-2.3,5.3-4.8c0.5-1.5,0.5-3.4-1-5.3c0,0-2.2-2.8-4.9-2.2" }), /*#__PURE__*/


    React.createElement("path", {
      className: "seq st5",
      d: "M51,318.6L3.4,366.2c0,0-3.6,3.3-2,7.3s6.2,5.7,8.7,3.2c2.2-2.2,2.5-5.1,0.1-7s-6.2,0.5-5,3" })), /*#__PURE__*/


    React.createElement("g", { className: "shield" }, /*#__PURE__*/
    React.createElement("path", {
      className: "st0",
      d: "M124.4,132.2c0,0,6.1-1.6,10.4,0s72.6,30.1,72.6,30.1s9.4,4.7,9.4,15.2 c0,10.5-1.3,100.4-79.3,137.7c0,0-7.2,4-15.3,0c-8.1-4-79.1-41.8-79.5-137.1c0,0,0-11.4,10.4-15.9 C63.5,157.7,124.4,132.2,124.4,132.2z" }), /*#__PURE__*/



    React.createElement("path", {
      className: "st2",
      d: "M128.5,140.6V159v39.4v34.8v58.7v15.5c0,0.1,0,1.6,0,1.6c0,0.8,0,0.8,0,0.8c-0.1,0-2.3-1-2.4-1 c-13-7.5-73.7-47-75-127.1c-0.1-5.3,3-10.1,7.8-12.3l67.8-30C127.5,139,128.5,139.7,128.5,140.6z" }), /*#__PURE__*/


    React.createElement("path", {
      className: "st1",
      d: "M128.5,315c1.3,0,2.8,0,4.3-0.3c8.6-1.9,19.9-9.4,33.1-20.4c5.5-4.5,10.8-10.3,17.3-18.2 c26.9-32.6,31-77.9,31.7-94.4c0,0-1,75.8-85.6,127.7c-0.1,0.1-0.7,0.1-0.7,0.3V315z" })), /*#__PURE__*/



    React.createElement("g", { className: "crown" }, /*#__PURE__*/
    React.createElement("g", { className: "seq-2 seq" }, /*#__PURE__*/
    React.createElement("path", {
      className: "st0",
      d: "M160.6,64l12.5-33.3c0.5-1.3-1-2.6-2.2-1.8l-16.1,9.6c-2.5,1.5-5.8,0.6-7.2-1.9L132.1,9c-0.6-1-2.1-1-2.6,0 l-15.6,27.6c-1.5,2.6-4.8,3.4-7.3,1.9L91,28.7c-1.2-0.8-2.7,0.4-2.2,1.8l12.1,33.4c0.4,1,1.3,1.7,2.4,1.7h55 C159.3,65.6,160.2,64.9,160.6,64z" }), /*#__PURE__*/



    React.createElement("path", {
      className: "st1",
      d: "M91.1,31.1l3.8,10.4c0,0,3.9-0.8,5.6-4.5L91.1,31.1z" }), /*#__PURE__*/

    React.createElement("path", {
      className: "st1",
      d: "M160.9,37.1c0,0,2.2,3.7,5.9,4.6l4-10.5L160.9,37.1z" }), /*#__PURE__*/

    React.createElement("path&.........完整代码请登录后点击上方下载按钮下载查看