CSShake 使用 CSS3 实现各种抖动效果

发布于 2020-07-19 09:55:16 字数 3415 浏览 2252 评论 0

CSShake 是一个使用 CSS3 实现的动画样式,使用 SASS 编写,利用它我们可以实现多种不同样式的抖动效果。

CSShake 是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。这个csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动。

安装方法

$ git clone https://github.com/elrumordelaluz/csshake.git
$ bower install csshake
$ npm i csshake

以上方法,任选其一即可。

使用方法

包括 CSS 文件,然后将类应用于元素

<link rel="stylesheet" type="text/css" href="csshake.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
<div class="shake"></div>
<div class="shake-hard"></div>
<div class="shake-slow"></div>
<div class="shake-little"></div>
<div class="shake-horizontal"></div>
<div class="shake-vertical"></div>
<div class="shake-rotate"></div>
<div class="shake-opacity"></div>
<div class="shake-crazy"></div>
<div class="shake-chunk"></div>
<ul class="shake-trigger">
  <li class="shake-slow"></li>
  <li></li>
  <li></li>
  <li class="shake-hard"></li>
  <li></li>
  <li class="shake"></li>
</ul>

要只包含一些csshake动画,请使用以下语法:

<link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">

摇动常数

<div class="shake-slow shake-constant"></div>
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover"></div>

在以下时间冻结动画,直到鼠标悬停。

<div class="shake-crazy shake-freeze"></div>

更多效果

你可以根据自己的需要,添加自己的效果:

.my-custom-shake {
  @include do-shake(
    $name: 'my-custom-shake', /* {String} is the name for the keyframes animation */
    $h: 5px, /*  {Number} is the max number for random to assign in x axis */
    $v: 5px, /* {Number} is the max number for random to assign in y axis */
    $r: 3deg, /* {Number} is the max number for random rotation */
    $dur: 100ms, /* {Number} is the animation-duration time value */
    $precision: .02, /* {Number} is the precision of the keyframes animation. For example .02 generates keyframes each 2% and .1 each 10%. The calculation is $step: 100 * $precision; */
    $opacity: false, 
    $q: infinite, /* {String} is the animation-iteration-count value */
    $t: ease-in-out, /* {String} animation-timing-function value */
    $delay: null, /* {Number} animation-delay time value */
    $chunk: 100% /* {Number} is the part of the keyframes where apply the animation */
  );
}

/* Example shake-crazy */
.shake-crazy { 
  @include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); 
}

官网:http://elrumordelaluz.github.io/csshake/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。