编写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
html
<div class="card">卡片内容</div>