CSS Shake:CSS3抖动样式让你的网页动起来

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果。比如自动抖动鼠标悬停抖动、鼠标划过抖动。这个效果很好玩,该特效可以用到logo、图标、按钮或者标题上面,显得很是动感!

css-shake-demo1 css-shake-demo2 css-shake-demo3

如何在网页中调用呢?只需要调用CSS Shake代码及文件即可。

<link type="text/css" href="http://elrumordelaluz.github.io/csshake/css/csshake.min.css">  /* 引入css shake的样式表,样式表可以下载到你的网站目录里调用哦 */
<div class="shake"></div>  /* 添加shake class样式 */
/* 添加抖动样式,一共9种,如下 */
<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>

更多还能通过 .freeze,.shake-constant & .hover-stop 来控制状态。

下载地址:http://elrumordelaluz.github.io/csshake/

11

发表评论
加载中...
  • 0.0 3年前 (2014-12-19)

    留名!改天试试!

  • xsm 3年前 (2014-11-03)

    错了吧 那里看的 不应该是rel=”stylesheet”吗 怎么是type=”text/css”

    查看对话
    • 微饭君 微Fan 3年前 (2014-11-03) 官方

      实现的效果都是一样的。

      • xsm 3年前 (2014-11-03)

        是吗 反正我试了不行

        • 微饭君 微Fan 3年前 (2014-11-03) 官方

          – -~ 是你调用方式不对吧!

相关文章