Как сделать текст с плавающей копией, который медленно исчезает для моего сайта ⇐ Html

[Anonymous]

Итак, мой текущий веб -сайт https://asmophacy.github.io/website/
do ()
Затем он перейдите и скопируйте его в буфер обмена, это мой текущий код JS для моей электронной почты
function copyText() {
/* Copy text into clipboard */
navigator.clipboard.writeText("minhkhoi.nguyengamer12@proton.me").then(() => {
// Optional: Add feedback here if you want
console.log("Email copied via copyText function!");
// alert("Email copied!"); // Simple feedback
}).catch(err => {
console.error("Failed to copy email via copyText function:", err);
});
}

document.addEventListener('DOMContentLoaded', () => {
// email copy code
const emailLink = document.querySelector('a.social-button.proton');

if (emailLink) {

emailLink.addEventListener('click', (event) => {
event.preventDefault(); // Prevent navigating to the link's href
copyText(); // Call your function here

// Optional: Add the visual feedback logic here if needed,
// using iconSpan and originalIconHTML like before,
// since copyText() itself doesn't handle it.
const iconSpan = emailLink.querySelector('span.icon');
if (iconSpan) {
const originalIconHTML = iconSpan.innerHTML;
iconSpan.textContent = 'Copied';
setTimeout(() => {
iconSpan.innerHTML = originalIconHTML;
}, 2000);
}
if (svg) {
const originalIconHTML = iconSpan.innerHTML;
iconSpan.textContent = 'Copied';
setTimeout(() => {
iconSpan.innerHTML = originalIconHTML;
}, 2000);
}

});

} else {
console.warn('Could not find the email link element (a.social-button.proton).');

< /code>
Я хочу, чтобы он вместо этого был похож на пар, где он плавает и медленно исчезает, как мне это сделать? Как будто он сохраняет исходные детали там и просто упростите, скопированный текст поднимается и исчезает
спасибо!
(мой первый пост) < /p>

Подробнее здесь: https://stackoverflow.com/questions/796 ... my-website