突发奇想之爱心拖尾

该补充知识了...

• animation
• clip-path(svg...)

    <svg>
        <clipPath id="myPath" clipPathUnits="objectBoundingBox">
        <path d="M0.5,1
          C 0.5,1,0,0.7,0,0.3
          A 0.25,0.25,1,1,1,0.5,0.3
          A 0.25,0.25,1,1,1,1,0.3
          C 1,0.7,0.5,1,0.5,1 Z" />
      </clipPath>
    </svg>
    <script>
        function createLove(size = 20, color = ['#0f0', '#f00', '#00f', '#0ae']){
            const love = document.createElement('div');
            const i = 0 | Math.random() * color.length;
            love.setAttribute('style', `width:${size}px;height:${size}px;background-color:${color[i]};clip-path:url(#myPath);position: fixed;`)
            love.animate([
                { opacity: 1 },
                { opacity: 0 }
            ],{
                duration: 500,
                easing: 'linear',
                fill: 'forwards'
            })
            .onfinish = function (e) { 
                love.remove()
            }
            return love;
        }
        function tool (callback,timing = 100) { 
            let timer = null;

            return (e)=>{
                if(timer){
                    return undefined;
                }
                timer = setTimeout(()=>{
                    callback(e);
                    clearTimeout(timer);
                    timer = null;
                }, timing)
            };
        }

        document.body.onmousemove =  tool((e)=>{
            const size = 20;
            const love = createLove(size);
            love.style.left = e.pageX - (size / 2) + 'px';
            love.style.top = e.pageY - (size / 2) + 'px';
            document.body.appendChild(love)
        }, 30)
    </script>