网站地图    收藏   

主页 > 前端 > css教程 >

css3抖动动画,CSS Shake分享

来源:未知    时间:2015-08-27 10:10 作者:xxadmin 阅读:

[导读] 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


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论