基于CSS和VUE的蚂蚁行军效果的框选框

效果图：

屏幕录制2022-04-27 16.44.05

<template>
  <div class="texts">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let texts = document.querySelector(".texts");
    let that = this;
    texts.addEventListener("mousedown", function (event) {
      let scrollLeft = this.scrollLeft;
      let scrollTop = this.scrollTop;
      let box = document.querySelector(".box");
      box.style.position = "absolute";
      box.style.left = scrollLeft + event.clientX + "px";
      box.style.top = scrollTop + event.clientY + "px";
      box.style.width = 0;
      box.style.height = 0;

      texts.addEventListener("mousemove", that.fn);
    });
    texts.addEventListener("mouseup", function () {
      texts.removeEventListener("mousemove", that.fn);
    });
  },
  methods: {
    fn(event) {
      let texts = document.querySelector(".texts");
      let scrollLeft = texts.scrollLeft;
      let scrollTop = texts.scrollTop;
      let box = document.querySelector(".box");
      box.style.width =
        event.clientX +
        scrollLeft -
        Number(getComputedStyle(box).left.slice(0, -2)) +
        "px";
      box.style.height =
        event.clientY +
        scrollTop -
        Number(getComputedStyle(box).top.slice(0, -2)) +
        "px";
    },
  },
};
</script>

<style>
@keyframes ants {
  0% {
    border-image: 1 repeating-linear-gradient(-45deg, black 0 1em, white 0 2em);
  }
  12.5% {
    border-image: 1
      repeating-linear-gradient(
        -45deg,
        white 0 0.25em,
        black 0.25em 1.25em,
        white 1.25em 2em
      );
  }
  25% {
    border-image: 1
      repeating-linear-gradient(
        -45deg,
        white 0 0.5em,
        black 0.5em 1.5em,
        white 1.5em 2em
      );
  }
  37.5% {
    border-image: 1
      repeating-linear-gradient(
        -45deg,
        white 0 0.75em,
        black 0.75em 1.75em,
        white 1.75em 2em
      );
  }
  50% {
    border-image: 1 repeating-linear-gradient(-45deg, white 0 1em, black 0 2em);
  }
  62.5% {
    border-image: 1
      repeating-linear-gradient(
        -45deg,
        black 0 0.25em,
        white 0.25em 1.25em,
        black 1.25em 2em
      );
  }
  75% {
    border-image: 1
      repeating-linear-gradient(
        -45deg,
        black 0 0.5em,
        white 0.5em 1.5em,
        black 1.5em 2em
      );
  }
  87.5% {
    border-image: 1
      repeating-linear-gradient(
        -45deg,
        black 0 0.75em,
        white 0.75em 1.75em,
        black 1.75em 2em
      );
  }
  100% {
    border-image: 1 repeating-linear-gradient(-45deg, black 0 1em, white 0 2em);
  }
}

.texts {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 75%);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, -15px -15px;
  overflow: scroll;
}
.box {
  position: absolute;
  left: -1000px;
  top: -1000px;
  font-family: "Times New Roman", Times, serif;
  border: 1px solid transparent;
  padding: 1px;
  border-image: 1 repeating-linear-gradient(-45deg, black 0 1em, white 0 2em);
  animation: ants 0.5s linear infinite;
}
p {
  width: 100px;
  height: 200px;
}
</style>