CSShake 是一个轻量级的纯 CSS 动画库，专注于为网页元素添加抖动（shake）效果，无需依赖 JavaScript。它提供多种预设动画类，适用于按钮、图片、通知等元素，增强用户体验。
CSShake 官网：https://elrumordelaluz.github.io/csshake/
CSShake 简介
CSShake 由开发者 Alejandro Hernández 创建，旨在通过简单的 CSS 类为网页元素添加动态抖动效果。它使用现代 CSS3 技术，如 transform 和 keyframes，实现多种抖动动画，适用于不同的设计需求。
安装与引入
方法一：通过 CDN 引入
在 HTML 的 <head> 标签中添加以下链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.7.0/csshake.min.css">
方法二：本地安装
使用 npm 安装：
npm install csshake
安装后，在项目中引入 CSS 文件：
<link rel="stylesheet" href="node_modules/csshake/dist/csshake.min.css">
CSShake 使用方法
在需要添加抖动效果的元素上添加相应的类名。例如：
<div class="shake">默认抖动</div>
<div class="shake shake-hard">强烈抖动</div>
<div class="shake shake-slow">缓慢抖动</div>
<div class="shake shake-little">轻微抖动</div>
<div class="shake shake-horizontal">水平抖动</div>
<div class="shake shake-vertical">垂直抖动</div>
<div class="shake shake-rotate">旋转抖动</div>
<div class="shake shake-opacity">透明度抖动</div>
<div class="shake shake-crazy">疯狂抖动</div>
此外，还可以使用以下类控制动画的播放状态：
shake-freeze：在当前状态冻结动画。 shake-constant：持续播放动画。 shake-constant--hover：鼠标悬停时停止动画。自定义动画
CSShake 提供了 Sass @mixins，允许开发者自定义抖动动画。通过编辑 scss/_tools.scss 文件中的 do-shake mixin，可以设置以下参数：
$name：动画名称。 $h：x 轴最大偏移量。 $v：y 轴最大偏移量。 $r：最大旋转角度。 $dur：动画持续时间。 $precision：关键帧精度。 $opacity：是否包含透明度变化。 $q：动画循环次数。 $t：动画缓动函数。 $delay：动画延迟时间。 $chunk：应用动画的关键帧百分比。例如，创建一个自定义的轻微抖动动画：
.my-custom-shake {
@include do-shake(
$name: 'my-custom-shake',
$h: 5px,
$v: 5px,
$r: 3deg,
$dur: 100ms,
$precision: 0.02,
$opacity: false,
$q: infinite,
$t: ease-in-out,
$delay: null,
$chunk: 100%
);
}
CSShake 应用场景
CSShake 适用于多种网页设计场景，包括但不限于：
表单验证错误提示。 按钮点击反馈。 重要通知或警告。 增强用户交互体验。 吸引用户注意特定元素。CSShake 是一个功能强大且易于使用的 CSS 动画库，适合希望为网页添加动态抖动效果的开发者。其丰富的预设类和自定义能力，使其在提升用户体验方面具有显著优势。无论是简单的按钮反馈，还是复杂的用户交互，CSShake 都能提供高效的解决方案。
