TextVue.vue

<!--
 * 测试
  -->
<script setup lang="ts">
import { onMounted } from 'vue';
import anime from 'animejs/lib/anime.es.js';

onMounted(() => {
  anime({
    targets: '.box1',
    left: '240px',
    backgroundColor: '#000',
    borderRadius: ['0%', '50%'],
    easing: 'easeInOutQuad',
  });

  let path = anime.path('path');

  anime({
    targets: '.el',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: 'linear',
    duration: 2000,
    loop: false,
  });
});
</script>
<template>
  <div>
    <div class="box1"></div>
    <div class="text-svg">
      <div class="el"></div>
      <svg
        t="1652088790468"
        class="icon"
        viewBox="0 0 1067 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1324"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="520.99609375"
        height="500"
      >
        <path
          d="M43.389831 980.610169V173.559322c0-71.59322 58.576271-130.169492 130.169491-130.169491h720.271186c71.59322 0 130.169492 58.576271 130.169492 130.169491v807.050847H43.389831z"
          fill="#94D6D0"
          p-id="1325"
        ></path>
        <path
          d="M43.389831 251.661017h980.610169v728.949152H43.389831z"
          fill="#F0F0FF"
          p-id="1326"
        ></path>
        <path
          d="M648.647593 521.719322l91.118644-60.745763-50.267118-31.678915-56.40678 394.847458 64.433898 9.207322 56.40678-394.847458 10.292068-72.053152-60.559187 40.374237-91.118644 60.745763zM305.173695 592.271186h199.59322v65.084746h-199.59322z"
          fill="#ABABD1"
          p-id="1327"
        ></path>
        <path
          d="M372.427932 514.169492h65.084746v221.288135h-65.084746z"
          fill="#ABABD1"
          p-id="1328"
        ></path>
        <path
          d="M43.389831 922.033898h980.610169V980.610169H43.389831z"
          fill="#6E6E96"
          opacity=".07"
          p-id="1329"
        ></path>
        <path
          d="M379.661017 43.389831h333.377085v208.271186H379.661017z"
          fill="#FFE95F"
          p-id="1330"
        ></path>
        <path
          d="M1024 173.559322c0-71.59322-58.576271-130.169492-130.169492-130.169491h-210.440677v208.271186H1024V173.559322z"
          fill="#FF9780"
          p-id="1331"
        ></path>
        <path
          d="M43.389831 208.813559h980.610169v83.525424H43.389831z"
          fill="#6E6E96"
          opacity=".15"
          p-id="1332"
        ></path>
      </svg>
    </div>

    <div class="text-router"></div>
  </div>
</template>

<style lang="scss" scoped>
.box1 {
  left: 0;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: pink;
}
.text-svg {
  position: relative;
  margin-bottom: 40px;
  .el {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: pink;
  }
}
.text-router {
  box-sizing: border-box;
  width: 500px;
  height: 500px;
  background-color: rgb(192, 230, 255);
  position: relative;
}
</style>