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.9.........完整代码请登录后点击上方下载按钮下载查看