[分享]css3文字抖动起来

CSS3文字抖动可以为网页增添趣味性和活力。以下是一些CSS3文字抖动的实现方式：

/* 1. 通过animation动画实现 */
@keyframes shake {
  0% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0); }
  20%, 40%, 60%, 80% { transform: translate(10px, 0); }
  100% { transform: translate(0, 0); }
}
p {
  animation: shake 0.5s infinite;
}

/* 2. 通过hover悬停实现 */
p:hover {
  animation: shake 0.5s;
}

/* 3. 通过JavaScript和CSS结合实现 */
/* HTML代码 */
<p id="shake">CSS3文字抖动</p>

/* JavaScript代码 */
let shake = document.getElementById("shake");
shake.addEventListener("mouseover", function() {
  shake.classList.add("shake-animation");
});
shake.addEventListener("animationend", function() {
  shake.classList.remove("shake-animation");
});

/* CSS代码 */
.shake-animation {
  animation: shake 0.5s;
} 

以上三种实现方式都可以让文字抖动起来，吸引用户的注意力。