JavaScript实现点击网页出现飘字（二）

参考了大佬@故人偏爱云腴白的思路，能实现效果，但是差了一些

css:

<style>
      .floatingfont {
        position: absolute;
        z-index: 999;
        animation: float 1.5s;

        color: rgb(223, 66, 66);
        font-size: 18xp;
        font-weight: 600;
        cursor: default;
        user-select: none;
        /* border-color: aqua; */
      }
      @keyframes float {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.7;
        }
        100% {
          opacity: 0;
          transform: translateY(-70px);
        }
      }
    </style>

JavaScript 

<script>
      var arr = [
        "富强",
        "民主",
        "文明",
        "和谐",
        "自由",
        "平等",
        "公正",
        "法制",
        "爱国",
        "敬业",
        "诚信",
        "友善",
      ];
      var index = 0;
      var text = document.createElement("div");
      document.documentElement.addEventListener("click", function (e) {
        var x = e.pageX;
        var y = e.pageY;
        text.setAttribute("class", "floatingfont");
        this.appendChild(text);
        text.style.left = x - text.clientWidth / 2 + "px";
        text.style.top = y - text.clientHeight / 2 + "px";

        text.innerHTML = arr[index];
        index == arr.length - 1 ? (index = 0) : index++;
        console.log(1);
      });
      document.documentElement.addEventListener("animationend", function (e) {
        text.parentNode.removeChild(text);
      });
    </script>