在vue项目引入css-doodle组件

要实现这种例子特效，有一种特别好用的插件css-doole官网，github

在vue项目中使用

• 直接在通过dom加载到页面中

<script setup>
const script = document.createElement("script");
script.src = "https://unpkg.com/css-doodle@0.37.4/css-doodle.min.js";
document.body.appendChild(script);
</script>

<template>
<div style='width:500px;height:500px'>
    <css-doodle grid="30x30">
      :doodle { @size: 100vw 100vmin; perspective: 10px; } :container {
      perspective: 50px; transform-style: preserve-3d; } position: absolute;
      top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; left: 50%;
      top: 50%; background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
      transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50,
      50, 3)vh, @rn(-100, 20)px); animation: move @rn(5, 15, 3)s infinite
      @rn(-20, -10, 3)s linear alternate; box-shadow: 0 0 1px #fff, 0 0 5px
      #fff; @keyframes move { 100% { margin-top: 500px; } }
    </css-doodle>
    </div>
</template>

• 通过npm和yarn导入

yarn add css-doodle
npm i css-doodle

• 下载好js包后，不支持import直接导入模块，在github中，作者介绍了一种导入方式,也可以通过这种方式导入模块

  import CSSDoodle from 'css-doodle';
  let doodle = CSSDoodle`
  @grid="20x20";`;
  const cssDoodel = ref(`<css-doodle grid="20x20">
        :doodle { @size: 100vw 100vmin; perspective: 10px; } :container { perspective: 50px; transform-style: preserve-3d; } position: absolute; top:
        0; left: 0; width: 2px; height: 2px; border-radius: 50%; left: 50%; top: 50%; background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
        transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px); animation: move @rn(5, 15, 3)s infinite
        @rn(-20, -10, 3)s linear alternate; box-shadow: 0 0 1px #fff, 0 0 5px #fff; @keyframes move { 100% { margin-top: 500px; } }
      </css-doodle>`);
      
 <template>
    <div style='width:500px;height:500px' v-html="cssDoodel"> </div>
</template>