[置顶] 自己实现CSS3动画抖动效果的实践记录
一、初步想法(不愿意看废话的直接从三看起)
起初，听到要做这个的时候我是拒绝的。。。。咳咳。。泥垢←_←
实现CSS3网页动画，对于刚学习html，css，js的我来说，其实难度还是很大的。html也许难度还行，但是后两者还几乎没有接触过。那么该怎么办呢？！╮（╯＿╰）╭有麻烦找度娘呗。刚开始搜索的时候，网上有关CSS3动画的资料和专门的网站非常多，刚开始想着直接写内部CSS好了。然而(骚年有点天真)，真的还是放在外部好啊。
后来在github上找到了某大大已经编好的CSS插件(反正这是最方便的方法了，要是不嫌麻烦你可以自己修改或写CSS→_→，反正我试过了，不拦你。)关于这个插件我的博文转载了。
二、自己的网站
有个自己的网站还是很方便的，去买个域名，买个主机空间，玩起来吧(前提:你还有钱吃饭)我的网址(http:\www.inourdream.xyz)
网站上我也会把下面的例子，放到网站上去
网站纯属恶搞，不具有任何真实性，非广告233
三、CSS3动画
CCS3强大之处呢。。。请百度。关于抖动动画的CSS文件请看我的转载博文
四、方法步骤
1.新建一张网页
正确格式
例如像我这样的233
网页样例：
![[置顶] 自己实现CSS3动画抖动效果的实践记录_第1张图片](http://img.e-com-net.com/image/info5/e7734f1f8eca4491802388e4190b42b8.jpg)
方便你们不想输入的懒虫，代码复制过去用吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3抖动</title> </head> <body style="text-align:center"> <div> <p style="font-size:36px">测试的文字`(*∩_∩*)′</p> <p>移动鼠标到文字上看看</p> </div> </body> </html>
2.导入CSS文件
再重申一遍，CSS文件在另一篇博文中。下载后把css文件放在和你网页所在的同一目录下，就可以开始了。
<link rel="stylesheet" type="text/css" href="文件名.css">
像这样
![[置顶] 自己实现CSS3动画抖动效果的实践记录_第2张图片](http://img.e-com-net.com/image/info5/0b96104263d54003b5b82815b2ffc3dd.png)
3.CSS的使用
这个插件中有默认的集中抖动幅度（可以自己打开css文件调）
<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>
![[置顶] 自己实现CSS3动画抖动效果的实践记录_第3张图片](http://img.e-com-net.com/image/info5/bbf802c859d443bfb86bc857a40f7c4a.png)
快测试一下吧！！！
4.JavaScript控制CSS动画(这才是关键)
对于这个步骤来说，没有特别要求 就算了。
以在文本框中输入特定内容改变标签属性为例
使用代码格式如下：
js脚本：
<script>
function act(){ /*定义行为*/
var ti=document.getElementById('t1').value; /*获取文本框中内容*/
if (ti=="1") /*if判断获取到的文本内容*/
{
var div=document.getElementById('play').className="shake"; /*改变div标签的 class属性，也就是修改css样式*/
}
}
</script>
表单：
<form> <input name="t1" id="t1" type="text" class="sdw text1" onchange="act()" placeholder="输入1让网页dou起来！" /> /*此处主要使功能实现的语句是input中的onchange，onchange后的act()就是在文本框内容改变后执行上方的脚本*/ <input type="submit" onclick="act()"/ > </form>
仔细看下方图片 注意id也就是名字的对应关系。
这是代码之间的关系示意图：
![[置顶] 自己实现CSS3动画抖动效果的实践记录_第4张图片](http://img.e-com-net.com/image/info5/98f832907dfe492b8d284106ddbec77f.png)
五、效果展示
第三步，直接添加 class方式效果
![[置顶] 自己实现CSS3动画抖动效果的实践记录_第5张图片](http://img.e-com-net.com/image/info5/f9484976ab4a445b89a0ab995d99088d.gif)
第四步，通过js改变 标签属性方式的效果
![[置顶] 自己实现CSS3动画抖动效果的实践记录_第6张图片](http://img.e-com-net.com/image/info5/4b5a5c9101ac4677b170eb5d11b92f7b.gif)
完整代码片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3抖动</title>
<link href="csshake.min.css" rel="stylesheet" type="text/css" />
<script>
function act(){
var ti=document.getElementById('t1').value;
if (ti=="1")
{
var div=document.getElementById('play').className="shake";
}
}
</script>
</head>
<body style="text-align:center">
<div id="play">
<p style="font-size:36px">测试的文字`(*∩_∩*)′</p>
<p>移动鼠标到文字上看看</p>
</div>
<div>
<form>
<input name="t1" id="t1" type="text" class="sdw text1" onchange="act()" placeholder="输入1让网页dou起来！" />
<input type="submit" onclick="act()"/ >
</form>
</div>
</body>
</html>
复制过去玩玩吧，我也是新手，谢捧场
