Creating an effect similar to the one you posted is fairly easily achievable.
$(document).ready(function(){
$('.clipboard').on("click", function(){
value = $(this).data('ref');
var $temp = $("<input>");
$("body").append($temp);
$temp.val(value).select();
document.execCommand("copy");
$temp.remove();
var message = document.createElement('p');
message.classList.add('effect');
message.innerHTML = 'URL copied!';
this.parentNode.insertBefore(message, this);
setTimeout(function () {
$(message).remove();
}, 2500);
})
})
@keyframes anim {
from{ color: orange;}
to {color: white;}
}
.effect {
font-weight: 600;
animation-name: anim;
animation-duration: 2.5s;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<span class="clipboard" data-ref="example.com1">Copy URL</span>
<span class="clipboard" data-ref="example.com2">Copy URL</span>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
