html
<div id="shake" class="shape">horizontal shake</div>
js（vue3）
function shake(elemId) {
const elem = document.getElementById(elemId)
console.log('获取el', elem)
if (elem) {
elem.classList.add('shake')
setTimeout(() => {
elem.classList.remove('shake')
}, 800)
}
}
onMounted(() => {
setTimeout(() => {
console.log('进来settimeout')
shake('shake')
}, 5000)
})
css文章来源：https://www.toymoban.com/news/detail-728040.html
.shape {
margin: 50px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake {
/* 水平抖动，核心代码 */
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(+2px, 0, 0);
}
30%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(+4px, 0, 0);
}
50% {
transform: translate3d(-4px, 0, 0);
}
}
参考链接：https://juejin.cn/post/6957517187049324552文章来源地址https://www.toymoban.com/news/detail-728040.html
到了这里，关于css3实现页面元素抖动效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
