svg.js实现鼠标点击产生彩色墨汁水渍动画效果代码-html代码-BFW代码库

svg.js实现鼠标点击产生彩色墨汁水渍动画效果代码

代码语言：html

所属分类：其他

代码描述：svg.js实现鼠标点击产生彩色墨汁水渍动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
        }
        
        svg {
          width: 25vmin;
          aspect-ratio: 1;
          overflow: visible !important;
          position: absolute;
          top: calc(var(--y) * 1px);
          left: calc(var(--x) * 1px);
          transform: translate(-50%, -50%);
        }
        
        h1 {
          margin: 0;
          opacity: 0.5;
          position: fixed;
          bottom: 1rem;
          right: 1rem;
          font-family: sans-serif;
          z-index: 10;
        }
    </style>



</head>

<body>
    <h1>tap to splat</h1>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg.3.1.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg.filter.3.0.8.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
    <script>
        const SIZE = 100
        const generateSplat = ({ x, y }) => {
          const.........完整代码请登录后点击上方下载按钮下载查看