如何在CSS3/Javascript中创建"突出显示"效果？

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

.highlight {
  animation: highlight-animation 0.5s ease-in-out;
}

@keyframes highlight-animation {
  0% {
    transform: scale(1);
    color: blue;
  }
  50% {
    transform: scale(1.2);
    color: red;
  }
  100% {
    transform: scale(1);
    color: blue;
  }
}

const element = document.getElementById('my-element');

element.addEventListener('mouseover', () => {
  element.style.color = 'red';
  element.style.textDecoration = 'underline';
});

element.addEventListener('mouseout', () => {
  element.style.color = 'blue';
  element.style.textDecoration = 'none';
});