CSShake 项目教程

2026-01-15 16:37:48作者：房伟宁

1、项目介绍

CSShake 是一个用于为 DOM 元素添加摇晃动画效果的 CSS 类库。它提供了多种预定义的摇晃动画类，可以轻松地应用于网页中的元素，使其在用户交互时产生动态效果。CSShake 不仅支持基本的摇晃效果，还提供了多种变体，如慢速摇晃、轻微摇晃、水平摇晃等，以满足不同的设计需求。

2、项目快速启动

安装

你可以通过以下几种方式安装 CSShake：

通过 Git 克隆仓库：

git clone https://github.com/elrumordelaluz/csshake.git

通过 Bower 安装：
```
bower install csshake
```
通过 npm 安装：
```
npm install csshake
```

使用

引入 CSS 文件：

<link rel="stylesheet" type="text/css" href="path/to/csshake.css" />

应用摇晃效果：

<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>

控制动画状态：

<!-- 冻结动画 -->
<div class="shake shake-freeze"></div>
<!-- 持续动画 -->
<div class="shake shake-constant"></div>
<!-- 悬停时停止动画 -->
<div class="shake shake-constant shake-constant--hover"></div>

3、应用案例和最佳实践

应用案例

按钮交互效果：在按钮上应用 shake 类，当用户悬停或点击按钮时，按钮会产生摇晃效果，增强用户交互体验。
```
<button class="shake shake-little">点击我</button>
```
错误提示：在表单验证失败时，可以对错误提示信息应用 shake-hard 类，使其产生强烈的摇晃效果，吸引用户注意。
```
<div class="shake shake-hard">请输入正确的邮箱地址</div>
```

最佳实践

适度使用：摇晃效果虽然能增强交互体验，但过度使用可能会导致用户分心。建议在关键交互点使用，如按钮点击、错误提示等。

自定义动画：CSShake 提供了自定义动画的功能，你可以通过修改 Sass 文件中的 do-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%
);

4、典型生态项目

CSShake 作为一个独立的 CSS 类库，主要用于为网页元素添加摇晃动画效果。它不依赖于其他特定的生态项目，但可以与其他前端框架（如 React、Vue.js）结合使用，以增强用户界面的交互效果。

例如，在 React 项目中，你可以通过引入 CSShake 的 CSS 文件，并在组件中应用相应的类来实现摇晃效果。

import React from 'react';
import './csshake.css';

const Button = () => (
  <button className="shake shake-little">点击我</button>
);

export default Button;