. JavaScript & CSS】 | WebDev Tech
JavaScript & CSS】 | WebDev Tech
JavaScript & CSS】 | WebDev Tech

ボタンをホバーするとキラキラが発生するエフェクトの実装方法【JavaScript & CSS】

ありがとうございます! JSを以下に入れ替えると動くと思うので、試していただけますか? // js-glitterクラスがついた要素を全て取得 const glitterEls = document.querySelectorAll(".js-glitter"); // 取得した要素をArrayに変換 const glitterElsArr = Array.prototype.slice.call(glitterEls); // キラキラを生成する関数 const createStar = (el) => const starEl = document.createElement("span"); starEl.className = "star"; starEl.style.left = Math.random() * el.clientWidth + "px"; starEl.style.top = Math.random() * el.clientHeight + "px"; el.appendChild(starEl); // 一定時間経つとキラキラを消す setTimeout(() => starEl.remove(); >, 1000); >; // 取得した要素ひとつひとつに処理を行う glitterElsArr.forEach((glitterEl) => setInterval(createStar.bind(undefined, glitterEl), 200); >);

📎📎📎📎📎📎📎📎📎📎