自个儿实现CSS3动画抖动效果的实践记录

自己实现CSS3动画抖动效果的实践记录

一、初步想法(不愿意看废话的直接从三看起)

起初，听到要做这个的时候我是拒绝的。。。。咳咳。。泥垢←_←

实现CSS3网页动画，对于刚学习html，css，js的我来说，其实难度还是很大的。html也许难度还行，但是后两者还几乎没有接触过。那么该怎么办呢？！╮（╯＿╰）╭有麻烦找度娘呗。刚开始搜索的时候，网上有关CSS3动画的资料和专门的网站非常多，刚开始想着直接写内部CSS好了。然而(骚年有点天真)，真的还是放在外部好啊。

后来在github上找到了某大大已经编好的CSS插件(反正这是最方便的方法了，要是不嫌麻烦你可以自己修改或写CSS→_→，反正我试过了，不拦你。)关于这个插件我的博文转载了。

二、自己的网站

有个自己的网站还是很方便的，去买个域名，买个主机空间，玩起来吧(前提:你还有钱吃饭)我的网址(http:\www.inourdream.xyz)

网站上我也会把下面的例子，放到网站上去

网站纯属恶搞，不具有任何真实性，非广告233

三、CSS3动画

CCS3强大之处呢。。。请百度。关于抖动动画的CSS文件请看我的转载博文

四、方法步骤

1.新建一张网页

正确格式

例如像我这样的233

网页样例：

方便你们不想输入的懒虫，代码复制过去用吧：

<!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动画抖动效果的实践记录

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>

在你想要加效果的区域加上想要的效果。（div可以是其他标签）

快测试一下吧！！！

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也就是名字的对应关系。

这是代码之间的关系示意图：

五、效果展示

第三步，直接添加 class方式效果

第四步，通过js改变标签属性方式的效果

完整代码片：

<!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>

复制过去玩玩吧，我也是新手，谢捧场

1楼aaaaPAN8小时前: cool 大神，请收下我的膝盖吧233333333333333333

自个儿实现CSS3动画抖动效果的实践记录

一、初步想法(不愿意看废话的直接从三看起)

二、自己的网站

三、CSS3动画

四、方法步骤

1.新建一张网页

2.导入CSS文件

3.CSS的使用

4.JavaScript控制CSS动画(这才是关键)

五、效果展示

相关推荐