CSShake 使用 CSS3 实现各种抖动效果
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); }
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论