CSS图书馆 » HTML & CSS » 动起来!好玩的CSS抖动样式 – CSS Shake

动起来!好玩的CSS抖动样式 – CSS Shake

发表于: HTML & CSS. 评论 (3)
Sponsor

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。

这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,下面一起来看看介绍:

css-shake-demo1

 

css-shake-demo2

 

css-shake-demo3

一共9个不同的抖动动画选择

 

使用教程

首先引入css shake的样式表文件。

<link type="text/css" href="csshake.css">

给你的DOM元素添加shake class样式

<div class="shake"></div>

添加抖动样式,一共9种,也可以看DEMO对应添加即可

<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 来控制状态,具体自己试下哦!

在线演示:DEMO
下载地址:CSS样式表 | Github
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论3 Responses to “动起来!好玩的CSS抖动样式 – CSS Shake”

  1. AYUWY0224 - 回复

    好好玩

  2. admin - 回复

    怎么默认是动的啊

  3. admin - 回复

    这个样式文件是不是太大了啊


{ 发表评论 }