效果图：

在输入框中 进行字母和数字输入的时候 可以看见 输入的数字字母 会从输入框内不同的位置大小 飞出

html：

css:

     * {
        padding: 0;
        margin: 0;
      }
      .clearfix:before,
      .clearfix:after {
        content: " ";
        display: table;
      }

      .clearfix:after {
        clear: both;
      }
      body {
        background: #494a5f;
        color: #d5d6e2;
        font-weight: 500;
        font-size: 1.05em;
        font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
        letter-spacing: 2px;
        text-align: center;
      }

      .box {
        margin-top: 50px;
        display: flex;
        flex-flow: column wrap;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }

      form {
        margin: auto;
      }

      .input-wrap {
        width: 500px;
        max-width: 100%;
        position: relative;
      }
      .input-wrap .after {
        position: absolute;
        height: 2px;
        width: 100%;
        background: #fff;
        left: 0;
        bottom: 0;
        transform: scale(0, 1);
        transition: 0.3s;
      }
      .input-wrap span {
        display: none;
        font-size: 20px;
        color: #fff;
        position: absolute;
        bottom: 50%;
        -webkit-transition: margin 0.8s;
        transition: margin 0.8s;
        opacity: 0.8;
        margin: 0;
        left: 50%;
        font-weight: 100;
      }
      .input-wrap span.in {
        margin-bottom: 20px;
      }

      input {
        appearance: none;
        border-radius: 0;
        border: none;
        outline: none;
        padding: 0 10px;
        height: 60px;
        width: 100%;
        background: rgba(255, 255, 255, 0.1);
        font: 25px Helvetica;
        color: #fff;
        transition: 0.3s;
        text-align: center;
        letter-spacing: 3px;
      }
      input:focus::placeholder {
        opacity: 0;
      }
      input:focus + .after {
        transform: scale(1, 1);
      }
      input::placeholder {
        transition: 0.3s;
        color: #fff;
        font-weight: 900;
      }
      input:focus {
        background: rgba(255, 255, 255, 0.3);
      }
      input.error {
        border-color: #ea1d1d;
      }

js:

 (function ($) {
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    $.fn.animChars = function (options) {
      var params = $.extend(
        {
          duration: 1,
          upperLimit: 150,
          sizeInterval: [15, 80],
        },
        options,
      );
      $(this).keypress(function (e) {
        console.log(this.selectionStart);
        var rand = getRandomInt(1, 9);
        var randP = Math.floor(Math.random() * 10);
        randP < 5 ? (randP = rand) : (randP = rand - rand * 2);

        var c = String.fromCharCode(e.which);
        $(this)
          .parent()
          .append("<span class='cl" + rand + "'>" + c + "</span>");

        $(this)
          .parent()
          .find("span.cl" + rand + "")
          .css({
            left: getRandomInt(0, 90) + "%",
            "font-size": getRandomInt(params.sizeInterval[0], params.sizeInterval[1]),
          })
          .fadeIn(100, function () {
            $(this)
              .css({
                "margin-bottom": getRandomInt(params.upperLimit - params.upperLimit / 2 ? params.upperLimit / 2 : 0, params.upperLimit),
                "margin-left": randP * 10,
              })
              .fadeOut(params.duration * 1000, function () {
                $(this).remove();
              });
          });
      });
    };
  })(jQuery);
  $(document).ready(function () {
    $("input").animChars({
      duration: 0.8,
      upperLimit: 200,
      sizeInterval: [15, 80],
    });
  });