发布于2014-03-19,阅读4993次,收藏 4次,评论0条 - 来自极客元神  | 收藏

让我们晃动起来 - CSS小脚本工具:CSS Shake

UI或者网站设计中,或许在某些情况下你希望你的用户能够关注某一个区域或者某一个界面元素,过去大家常用的方式是使用一个GIF图片,或者土一点儿方法生成一个高亮的区域,但随着浏览器的发展及其CSS动画的实现,我们可以借助一点点代码来生成。

在今天这篇小文章中,我们将介绍一个小巧的CSS脚本工具 - CSS Shake,它能够帮助你快速高效的生成一个“晃动”效果,你可以通过它来添加一个晃动效果到你的页面元素中。使用也超级简单,下面我们介绍如何使用:

导入CSS文件,如下:

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

添加一些CSS定义到页面元素上:

<pre class="shake shake-little shake-constant">Shake me a little</pre>

这里我们添加了shark效果,并且添加share-little,shake-constant,更多效果可以查看文档。

更多属性可以在这里查看:

更重要在于它支持SASS,所以如果你需要更好的修改以便添加到你的项目中去的话,将会非常方便!

http://www.gbtags.com/gb/debug/233659ba-8669-4cde-b89e-b885af4e56b7.htm

网站地址:http://elrumordelaluz.github.io/csshake


关于作者

极客元神

前端最新编程技术和体验,请立刻访问极客标签编程学习平台,真正的帮助你学习编程,现在就加入我们成为“GEEK”吧!!

极客主页:极客元神
新浪微博:访问微博

评论或回答

  1. 没有任何评论
评论请先登录



以后再转发,立刻下载!