实现类似QQ窗口抖动效果 前言效果图实现步骤1.js 部分如下2.css部分如下 总结
前言
刚入行的前端小白，在这里记录一下开发中遇到的事情 项目中有需求，点击dialog弹窗的阴影层要有窗口抖动提示效果，通过css动画进行实现
效果图 实现步骤 1.js 部分如下 //获取要抖动的窗口 const a = document.getElementById('one') //点击阴影层要触发的函数 function change() { //添加实现动画的类名 a.className='two' //清除动画类名 setTimeout(()=>{ a.className='' },700) } 实际开发时根据使用的框架及组件库来动态类型即可 2.css部分如下代码如下（示例）：
.two{ animation: shake 700ms linear; } /*只实现横向抖动，top值不变即可*/ @keyframes shake { 0%{ top: 0; left: 0; } 15%{ top: 20px; left: 20px; } 30%{ top: 10px; left: 10px; } 45%{ top: 30px; left: 30px; } 60%{ top: 5px; left: 5px; } 75%{ top: 20px; left: 20px; } 90%{ top: 0; left: 0; } 100%{ top: 20px; left: 20px; } }总结
首先，根据使用的组件库获取点击阴影层事件，并绑定方法，再通过使用的框架来动态改变类名即可。 有更好的实现方法请下方留言，大家进行交流一下
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
