前端开发

 首页 > 前端开发 > css教程 > css3抖动动画,CSS Shake分享使用教程

css3抖动动画,CSS Shake分享使用教程

分享到:
【字体:
导读:
          css3抖动动画,CSS Shake分享 CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当...

css3抖动动画,CSS Shake分享

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

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

css-shake-demo1

 

css-shake-demo2

 

css-shake-demo3

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

 

使用教程

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


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


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









另外我还能通过 .freeze, .shake-constant & .hover-stop 来控制状态,具体自己试下哦!

在线演示:DEMO
下载地址:CSS样式表 | Github


分享到:
推荐一款CSS3动画插件ANIMATE.CSS
推荐一款CSS3动画插件ANIMATE.CSS addstress https://github.com/daneden/animate.css Animate.css 只需加类CSS动画 animate.css 是一个很酷,有趣,和跨浏览器动画,为您使用在您的项目。伟大的强调,主页,滑块,一般只需加水魅力。 Basic Usage 包括在您的文档中的样式表     添加这个类名 animated 到你...
div+css仿猪八戒首页导航菜单效果实现
div+css仿猪八戒首页导航菜单效果实现 本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下: 这是一款仿猪八戒2010年首页的网页导航菜单,蓝色风格,非常漂亮大气、简洁专业,在此推荐给大家。菜单上有一个标记,指引当前的位置,也是本菜单的亮点。用CSS究竟是如何实现的呢?那么就请一...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……