CSS Hake

CSS Hake官网地址

CSS Hake的官方网站入口为：https://elrumordelaluz.github.io/csshake

CSS Hake是什么？

CSS Hake 是一个轻量级的前端动画库，专门提供各种抖动效果的 CSS 类。它由开发者 elrumordelaluz 创建并开源在 GitHub 上，适合需要在网页中添加趣味交互动画的设计师和前端开发者。只要引入一个 CSS 文件，再给 HTML 元素添加对应的类名，就能让页面元素产生水平、垂直、旋转、透明度变化甚至疯狂抖动等十几种不同的动画效果。无论是制作提示弹窗、表单错误反馈，还是想要给按钮增加一点活泼感，CSS Hake 都能用极低的代码成本帮你实现。

CSS Hake核心功能

• 基础抖动集合：提供了 Basic、Slow、Little、Hard 等不同速度和强度的基础抖动效果，满足常规交互场景
• 方向抖动：Fixed Horizontal 和 Fixed Vertical 可分别产生水平或垂直方向的固定抖动，Fixed Rotation 则是固定旋转抖动，适合用于图标或特殊提示
• 视觉叠加抖动：Opacity Shake 会让元素在抖动的同时改变透明度，Crazy Shake 带来不规则、幅度较大的疯狂抖动，让动画表现更夸张
• 持续性动画：通过 Constant Shake 类可以让抖动无限播放，结合 shake-constant–hover 还能在鼠标悬停时暂停动画，实现按需动效
• 父级触发控制：使用 shakes-trigger 类包裹子元素，可以统一控制多个子元素的动画触发时机，方便制作编排好的序列抖动效果。 自定义混入
• Mixin：对于使用 Sass 的项目，提供了 do-shake 混入，允许深度定制抖动参数，比如振幅、旋转角度、持续时间、精度等，灵活性极高

CSS Hake使用教程

下载或引入样式文件：可以通过 npm、bower 安装，或者直接下载 CSS 文件，也可以使用 cdnjs 或 surge.sh 提供的 CDN 链接。 在 HTML 中引入 CSS：在页面的 head 部分加入 link 标签，指向 csshake.min.css 或只引入某个具体抖动效果的独立文件，例如 csshake-slow.min.css。 给元素添加抖动类：在想要抖动的 div、button 或其它元素上直接添加类名，比如 class=”shake-hard” 就会产生强烈抖动。 组合控制类增强效果：如果需要抖动常驻，可以追加 shake-constant；若想在悬停时冻结动画，则加上 shake-freeze；使用 shakes-trigger 包裹多个子元素可以整合触发。 在 Sass 项目中深度定制：有经验的前端开发者可以引入 do-shake 混入，按照参数说明创建自定义抖动动画，并应用到任意选择器中。

易导航总结

CSS Hake 是一款依赖纯 CSS 实现的抖动动画工具库，体积小巧、上手简单，特别适合想要快速为网页元素添加活泼动效的开发者。从易导航的收录视角来看，该项目的文档和示例清晰，核心价值在于用约定的类名即可控制多种抖动效果，无需编写 JavaScript 脚本。对于只偶尔需要简单抖动动画的普通用户而言，直接复制 CDN 链接再添加几个 CSS 类就能完成工作，几乎零门槛。不过需要注意，该库目前主要提供抖动类动画，并非综合性动画库；如果项目中需要更复杂的动画编排，可能需要搭配其他工具。另外，个别效果在频繁触发时可能显得过于抢眼，建议根据场景克制使用。整体而言，CSS Hake 适合网站微交互、提示反馈等轻量场景，是前端工具箱中一个讨巧的补充。

易导航总结

CSS Hake适合需要快速确认官网入口、主要功能和使用范围的用户参考。具体功能、收费和可用性以网站实际页面为准。

首页截图