太阳，月亮点击代码源码包

// 太阳点击特效 -- 在vue组件中导入,后在created生命周期中调用clickWhite()即可 import "./clickWhite.css" // js中使用 ==> 节点.style.setProperty("--font-color", 'pink'); // sass中使用 ==> var(--font-color) ==> pink // document.documentElement.addEventListener('click' , clickWB) let arr = []; export const clickWhite = ()=>{ window.addEventListener('click' , clickWhiteFn) } export const clickWhiteFn = ()=>{ let clickWB = document.createElement('div'); arr.push(clickWB); clickWB.classList.add('clickWB'); clickWB.classList.add('minToMax'); const str1 = ` <div class="mmim mmim1"></div> <div class="mmim mmim2"></div> <div class="mmim mmim3"></div> <div class="mmim mmim4"></div> ` clickWB.innerHTML = ` <div class="counter"> <div class="clickWBMin smbm1"></div> <div class="clickWBMin smbm2"></div> <div class="clickWBMin smbm3"></div> <div class="clickWBMin smbm4"></div> <div class="clickWBMin smbm5"></div> <div class="clickWBMin smbm6"></div> <div class="clickWBMin smbm7"></div> <div class="clickWBMin smbm8"></div> </div> <div class="mainMin"> <div class="mainMinItem mmi1"></div> <div class="mainMinItem mmi2"></div> <div class="mainMinItem mmi3"></div> <div class="mainMinItem mmi4"></div> <div class="mainMinItem mmi5"></div> <div class="mainMinItem mmi6"></div> <div class="mainMinItem mmi7"></div> <div class="mainMinItem mmi8"></div> </div> <div class="switch_key"> <div class="key_center"> </div> </div> ` // <span class="iconfont icon-${style}" ref="p"></span> // <p class='toastStr ${str.length>=5 ? 'fz12' : ''}'>${str}</p> document.body.append(clickWB); clickWB.style = ` top : ${event.clientY-20}px; left : ${event.clientX-20}px ` clearAll(arr.length-1) } function clearAll (num){ setTimeout(()=>{ arr[num].remove() } , 400) }