颤抖吧CSS!能玩1年的CSS抖动样式 – CSS Shake!

颤抖吧CSS!能玩1年的CSS抖动样式 – CSS Shake!

2017年2月8日 2:24 技术控
1 7
为WordPress编辑器增加 字体选择 与 字体大小 设置选项!
老司机必装 Chrome浏览器 以图搜图 插件 – 二箱NooBox!

颤抖吧CSS!能玩1年的CSS抖动样式 – CSS Shake!

颤抖吧CSS!能玩1年的CSS抖动样式 – CSS Shake!

第一次见到CSS抖动样式还是早期的暴走漫画的导航菜单上的抖动效果,当时就觉得非常好玩并且百度了下实现方法,发现只需要引用个CSS Shake就可以实现,但是一直没有付之行动!

今天突然想到CSS抖动样式对于喜欢折腾的站长来说,还是一个非常提升网站B格的技能,就果断分享给大家了!小编呢在也本网站使用CSS Shake效果,效果位置在首页右侧的工具菜单上!在文章的尾部小编也会放上官方的DEMO!

颤抖吧CSS!能玩1年的CSS抖动样式 – CSS Shake!

使用教程

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

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

给你的DOM元素添加shake class样式 也就是把你需要添加效果DIV上加上你需要的shake class样式

/* 如你要添加DIV的位置为<div class="tianjia"> 即: */
<div class="tianjia"></div>
/* 我们给他添加一个shake-har的抖动效果 即: */
<div class="tianjia shake-har"></div>

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

<div class="shake-hard"></div>
<div class="shake-slow"></div>
<div class="shake-little"></div>
<div class="shake-horizontal"></div>
<div class="shake.vertical"></div>
<div class="shake-rotate"></div>
<div class="sshake-opacity"></div>
<div class="shake-crazy"></div>

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

官方DEMO:传送门
CSS样式表下载:传送门
文章总数
2253+
标签总数
1984+
评论总数
11768+
运营天数
1220+