纯CSS实现卡片欢动效果

编写CSS样式

@keyframes cardShake {
  0% { transform: translateX(-2px); }
  25% { transform: translateX(2px); }
  50% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
  100% { transform: translateX(-2px); }
}
 
.card {
  animation: cardShake 0.5s; /* 抖动的持续时间 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

HTML中引用class

<div class="card">卡片内容</div>