JS+css实现窗口快速抖动，仿mac、linux系统动画特效！适合于错误提示，弹窗提示，警告窗口等场景！

在Web开发中，可以使用JavaScript和CSS来实现窗口的抖动效果，这种效果常见于错误提示、弹窗提示或者警告中。以下分享一个简单的实现示例（两种方法）

话不多说，直接上代码：

方法一：

CSS部分

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { transform: translateX(-3px); }
    10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: translateX(3px); }
}

.shake-animation {
    animation: shake 0.6s;
    animation-fill-mode: forwards;
}

HTML部分

<div id="box">抖动停止</div>
<button onclick="shake"></button>

JS部分

function shake() {
    document.getElementById('box').classList.add('shake-animation');
}

方法二：

HTML部分：

<div id="shake-animation">窗口抖动效果</div>

CSS部分：

#shake-animation {
  position: relative;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
  text-align: center;
}

JS部分：

function shake(element, times, distance, duration) {
  let counter = 0;

  // 定义动画函数
  function animate() {
    if (counter >= times) {
      return;
    }

    element.style.transform = 'translate3d(' + distance + 'px, 0, 0)';
    // 使用setTimeout来实现延迟动画效果
    setTimeout(() => {
      element.style.transform = 'translate3d(0, 0, 0)';
    }, duration / 2);

    counter++;
  }

  // 调用动画函数
  animate();
}

// 获取窗口抖动元素
const elem = document.getElementById('shake-animation');
// 触发抖动效果
shake(elem, 4, 5, 300); // 抖动次数、抖动距离、抖动持续时间

这段代码定义了一个shake函数，它接受四个参数：element是要实现抖动效果的DOM元素，times是抖动的次数，distance是每次抖动的距离，duration是每次抖动的持续时间。函数内部使用了transform属性和setTimeout来实现窗口的抖动动画。

你可以根据实际需求调整times, distance, duration的值来改变抖动的强度和频率。这个函数适用于Web开发中的各种场景，比如表单验证错误提示、登录失败弹窗等。

源码下载地址：

下载地址：https://download.csdn.net/download/xiaoyao_studio/89892559

参考文献：

1、基于Uni-app前端框架的SUMER UI3.0组件库

2、uniapp精仿支付宝UI界面源码下载，基于SumerUI一款仿支付宝APP

3、uniapp精仿微信源码，基于SumerUI一款仿微信APP应用

SUMER UI 【用于开发APP、小程序、H5网站、毕业设计…】

官网：https://www.sumer.work