您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

推荐:好玩的CSS3抖动特效——Shake

发布时间:2016-01-30编辑:余斗文件大小:6KB阅读:(0)字号:
      很久之前就在别人网站上看到这个抖动的特效,一直也想在自己博客上弄一个,昨天刚好看到一个CSS3教程说道这个特效,就在自己博客上实现了,看看效果吧:   推荐:好玩的CSS3抖动特效——Shake   这里要用到的就是CSS3的特性——Shake,Shake使用SASS编写,利用它我们可以实现多种不同样式的抖动效果。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。   这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,一起来看一下吧。 实现方法也很简单,因为已经有了做好的CSS代码,我们只需要引入文件在需要抖动的地方调用即可。   使用教程   1.引入CSS shake样式表(文章结尾下载)

    <link type="text/css" href="http://lailaikeji.com/spa" style="color:#91268F">"csshake.css">
     
      2.在需要抖动的元素块中加入shake的class属性

    <div class="shake"></div>
     
      抖动样式一共有九种:

    <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开控制状态。话不多说,点击预览来看一看吧。
     
    推荐:好玩的CSS3抖动特效——Shake 抖动分类 推荐:好玩的CSS3抖动特效——Shake 特效选择

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词css3 shake 抖动特效
余斗余斗
  1. 转载请注明: 推荐:好玩的CSS3抖动特效——Shake_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html5模版 分类下,于2016-01-30最后更新
清新绿色DedeCMS织梦后台登陆模板
js实现倒计时与网站运行时间特效
手机扫一扫 随身带着看
鸿运国际手机登录首页