腾讯管家前端动画

创建2022-02-18更新2022-03-24阅读时间43m

该项目将一个完整flash剧情动画还原成一个由JS+CSS3实现的前端动画。
学习链接
01

预备知识

$(".show601").css
设置/添加css样式，都用字符串表示，可用变量。

$(".smoke1 img").eq(0).css
匹配一个给定索引值的元素 - 选择器

$("#list1").children().eq(3)[0]
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 - 筛选

$().click()
触发每一个匹配元素的click事件。

$().index()
搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

$().attr()
获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

和$(".show601").css的区别？？？

  • attr()： 获取和修改的是元素的属性，如img的src属性和alt属性，a链接的href属性等等。
  • css() ：获取和修改的是样式里面的属性，即是style里面的属性。

"animation":".4s 0.4s penguin","animation-fill-mode":"both","-webkit-animation":".4s 0.4s penguin","-webkit-animation-fill-mode":"both"
animation
animation-fill-mode

  • 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  • 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。？？？？

-webkit-animation - /* Safari 和 Chrome */
-webkit-animation-fill-mode

1
2
3
4
5
6
每个主流浏览器都有自身的前缀，这些前缀放在css属性名的前面：
-webkit-   Webkit / Safari / 旧版本的Chrome）
-moz-      (Firefox浏览器)
-ms-       Internet Explorer 浏览器）
-o-        Opera浏览器）
多数情况下一般只需要 -webkit- 前缀，但也并非所有的CSS属性都需要为浏览器准备的前缀。

cubic-bezier
cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。
P0 和 P3 是曲线的起点和终点。
P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。
01

transform-origin
设置旋转元素的基点位置： - 依据元素自身 - 思考九宫格。
动画演示 CSS transform 属性轴心位置

animation 和 transition 的区别

  1. transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
  2. animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
  3. animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
  4. animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
  5. 在性能方面，使用 aniamtion，改变较多，页面的回流和重绘，transition ，常结合tansfrom ，不会触发回流
1
2
3
4
5
6
7
8
transform:
	perspective(600px) 
	rotateY(-10deg) 
	rotateX(69deg) 
	rotateZ(36deg);
	
-webkit-transform-origin:right;
-webkit-transform:

Css3 Transform 各种变形旋转 - 菜鸟教程案例

perspective(600px)
为 3D 转换元素定义透视视图。

rotateX(angle) - 定义沿着 X 轴的 3D 旋转。 - 上下
rotateY(angle) - 定义沿着 Y 轴的 3D 旋转。 - 左右
rotateZ(angle) - 定义沿着 Z 轴的 3D 旋转。

页面构建

主要是通过页面中心部分来展示动画效果。

头部的导航栏，设置文字信息
中间的按钮，用来展示每个页面的动画。

主要是通过CSS3来处理动画，JS - Jquery来处理交互部分。

结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
div.center
	div.w1000.stage
		div.center-top
			ol#list1
				li.list1_active
				li*4 - 切换动画按钮
			p
				a*5 - 分享按钮
		div.tab
			div#div00
				img*5 - 动画展示区域
	div.an.w1000.stage
	div.load.w1000.stage

样式设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.w1000 {
	width: 1000px; // 设置宽度
	margin: 0 auto; // 水平居中
}

.stage {
	height: 740px; // 设置高度
	position: relative;
}

// 设置分享按钮背景图片 - url()
.center_top {
	z-index: 10
}
.center_top p {
	position: absolute;
	top: 28px;
	right: 17px;
	width: 225px;
	line-height: 16px;
	font-size: 14px;
	color: white;
}
.center_top a {
	margin-right: 7px;
	display: inline-block;
	width: 18px;
	height: 17px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}
.center_top a:nth-of-type(1) {
	background: url("image/piclogo.png") no-repeat 0 0
}

css文件定义动画内容

主要改变的是：
opacity - 显示与隐藏！
left - 依据定位
top
width - 元素大小
height
transform-origin + -webkit - 位置
transform + -webkit - 透视样式

0%
8%
16%
24%
50% - 进度 - 有点贝塞尔曲线的感觉。
100% - 这里的顺序有影响！

1
2
3
4
5
6
7
8
9
10
11
12
@keyframes move1_1{0%{opacity:1;left:720px;top:325px;width:410px;height:399px;transform-origin:right;transform:perspective(600px) rotateY(-10deg) rotateX(69deg) rotateZ(36deg);-webkit-transform-origin:right;-webkit-transform:perspective(600px) rotateY(-10deg) rotateX(69deg) rotateZ(36deg)}
8%{opacity:1;left:673px;top:205px;width:438px;height:442px;transform-origin:right;transform:perspective(600px) rotateY(-40deg) rotateX(50deg) rotateZ(8deg);-webkit-transform-origin:right;-webkit-transform:perspective(600px) rotateY(-40deg) rotateX(50deg) rotateZ(8deg)}
16%{opacity:1;left:675px;top:173px;width:411px;height:449px;transform-origin:right;transform:perspective(600px) rotateY(-43deg) rotateX(42deg) rotateZ(5deg);-webkit-transform-origin:right;-webkit-transform:perspective(600px) rotateY(-43deg) rotateX(42deg) rotateZ(5deg)}
24%{opacity:1;left:544px;top:109px;width:438px;height:481px;transform-origin:right;transform:perspective(600px) rotateY(-53deg) rotateX(10deg) rotateZ(0);-webkit-transform-origin:right;-webkit-transform:perspective(600px) rotateY(-53deg) rotateX(10deg) rotateZ(0)}
100%,32%{opacity:1;left:507px;top:98px;width:440px;height:500px;transform-origin:right;transform:perspective(600px) rotateY(-55deg);-webkit-transform-origin:right;-webkit-transform:perspective(600px) rotateY(-55deg)}
50%{opacity:1;left:496px;top:127px;width:437px;height:480px;transform-origin:right;transform:perspective(600px) rotateY(-55deg) rotateX(-6deg) rotateZ(2deg);-webkit-transform-origin:right;-webkit-transform:perspective(600px) rotateY(-55deg) rotateX(-6deg) rotateZ(2deg)}
}

// 兼容性 /*Safari 和 Chrome:*/
@-webkit-keyframes move1_1{
	
}

实现效果

01

执行动画的细节 - 描述 + 代码
修改@keyframes即可展示内容。
所有都写两遍，兼容性。。-webkit

所有内容，都是通过Jquery写入页面，实现动画效果。
$(".three_window").css({transition:"all 0.5s 0.2s",transform: "rotateX(0deg) skew(0deg)",'-webkit-transition':"all 0.5s 0.2s",'-webkit-transform': "rotateX(0deg) skew(0deg)"});

界面1：

效果：
文字出现
文字由无到有，由小到最大，到大，缓动动画。
文字出现顺序控制，一个一个出现，先出现重要信息，再出现点缀信息。

思路：
先加载 img0_1类
所有图片都是absolute定位，透明度为0，宽度高度为0开始。
每个图片都由不同的定位。设置left 和 top的值。
设置相同的动画延续时间，但是延迟不同 - 先后之分
设置相同的cubic-bezier， 缓动动画。

通过Js设置改变后的样式。
改变位置，这里可以设置位置的出现方式。从原先的位置，移动到现在的位置
改变宽高 - 实现图片从小到大
改变透明度 - 使图片可见！

界面二：

这两个界面是怎么切换的？？？
展示页面是空的，每次切换，写入不同内容！！（JS操作）

效果：
图表 + 箭头动画
使用图表构建3D场景，然后出现人物图片，背后箭头执行动画效果。
然后文字滚动出现 - 统一文字出现效果。

思路：
通过CSS设置基本样式，JS添加类，增加动画效果！
想出现，先消失 - opacity: 0
要移动，先有位置 - 距离left， top的位置。

  • left 往右越来越大
  • top 往下越来越大

3D透视效果，主要是靠transform属性
在animation - 关键帧 - 设置transform透视变换动画。
transform还可以结合transform-origin控制变换的位置。

1
2
3
4
5
6
7
8
transform:
	perspective(600px) // 透视大小
	rotateY(-10deg) // 绕 y 轴
	rotateX(69deg)  // 绕 x 轴
	rotateZ(36deg); // 绕 z 轴

-webkit-transform
-webkit-transform-origin

这里最复杂的是箭头动画：
箭头一直往右延申，可以上下抖动，路径动画？

！
实现思路！
箭头是由方块拼起来的！然后加载动画，延迟显示

箭头结构！

1
2
3
4
5
6
<img src="image/one/60.png" alt="" class="img60"> \ 三角形
<div class="show601"></div>\ 方块
<div class="show602"></div> \
<div class="show603"></div>\
<div class="show604"></div> \
<div class="show605"></div> \

箭头样式
不设置宽度 - 宽度交给动画 - 可实现箭头延申效果
设置箭头旋转角度 + 高度 （定位位置）
设置箭头阴影 - box-shadow - 增加显示效果！
设置透明度为0 - 添加动画显示出来！

动画效果 - 设置动画内容 + 动画延迟 - 可以跑起来了，

1
2
3
4
5
@-webkit-keyframes move601{0%{width:0;opacity:1}
100%{width:294px;opacity:1}
}

$(".show601").css({animation: "0.55s 1s move601",'animation-fill-mode': "both","-webkit-animation": "0.55s 1s move601",'-webkit-animation-fill-mode': "both"});

文字出现：
透明度0
top位置修改。

界面三：

页面效果：
先出现山 - 从右到左
出现企鹅 - 从上到下
出现云雾 - 在企鹅的脚下 - 消失
出现门 - 从上到下
出现云雾 - 在门的脚下 - 消失
出现弓箭 - 射在门前 - 有透视效果
左右出现士兵 -
弓箭射向士兵的盾牌 -
士兵惊讶表情 -

难点：

  1. 出现云雾
  2. 弓箭位置

云雾结构 - 一张图片用三次 - 不同位置
$(".smoke1 img").eq(0).css 结合Js设置动画

1
2
3
4
5
<div class="smoke1">\ // 最外层定位 - 总
<img src="image/two/smoke.png" alt="">\ - 根据最外层定位。
<img src="image/two/smoke.png" alt="">\
<img src="image/two/smoke.png" alt="">\
</div>\

云雾样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.smoke1{position:absolute;top:530px;left:420px;width:170px;height:113px;opacity:1}
.smoke1 img:nth-of-type(1){position:absolute;top:0;left:0;width:73px;height:61px;opacity:0}
.smoke1 img:nth-of-type(2){position:absolute;top:0;left:80px;width:73px;height:61px;opacity:0}
.smoke1 img:nth-of-type(3){position:absolute;top:50px;left:35px;width:73px;height:61px;opacity:0}

// 出现 到消失动画。
@keyframes smoke1{0%{opacity:0;width:100px;left:430px} // 出现位置。
50%{opacity:.8}
100%{opacity:0;width:220px;left:400px} // 设置消失的方向。
}
@keyframes smoke1_1{0%{opacity:0;width:73px;left:0}
50%{opacity:.8}
100%{opacity:0;left:-30px;width:103px}
}

云雾逻辑 - 添加动画效果。添加/覆盖？？？
添加！

1
2
3
$(".smoke1 img").eq(0).css({animation:"0.8s 0.6s smoke1_1",'-webkit-animation':"0.8s 0.6s smoke1_1"});
$(".smoke1 img").eq(1).css({animation:"0.8s 0.6s smoke1_2",'-webkit-animation':"0.8s 0.6s smoke1_2"});
$(".smoke1 img").eq(2).css({animation:"0.8s 0.6s smoke1_3",'-webkit-animation':"0.8s 0.6s smoke1_3"});

弓箭结构 - 同一个图片 * 7
设置不同大小 - 近大远小
设置不同方向 - rotateZ(20deg)
透明度 - 0 - 1
位置 - 45°进入页面。

1
2
3
4
5
6
7
8
9
<div class="arrow">\
	<img src="image/two/two_arrow.png" class="arrow1">\
	<img src="image/two/two_arrow.png" class="arrow2">\
	<img src="image/two/two_arrow.png" class="arrow3">\
	<img src="image/two/two_arrow.png" class="arrow4">\
	<img src="image/two/two_arrow.png" class="arrow5">\
	<img src="image/two/two_arrow.png" class="arrow6">\
	<img src="image/two/two_arrow.png" class="arrow7">\
</div>\

界面四：

页面效果：

出现窗户 - 从后往前的透视效果
出现沙发 - 从上往下 + 由小变大
出现台灯 - 从上往下 + 由大到小
出现植物 - 同台灯
出现人物 - 从上到下 - 幅度大
出现气泡 - 从无到有，从小到大，然后增加浮动效果！
出现彩虹 - 彩虹滚动效果

难点：

  1. 气泡出现
  2. 彩虹动画

气泡结构 - 散装的就要包装起来！

1
2
3
4
5
6
7
8
<div id='small_logo'>\
	<img src='image/three/three_1.png'>\
	<img src='image/three/three_2.png'>\
	<img src='image/three/three_3.png'>\
	<img src='image/three/three_4.png'>\
	<img src='image/three/three_5.png'>\
	<img src='image/three/three_2.png'>\
</div>\

气泡样式 - 定位 + 大小 + 透明度

1
2
3
4
5
6
7
8
#small_logo{width:460px;height:255px;position:absolute;top:180px;left:297px}
#small_logo img:nth-of-type(1){position:absolute;top:175px;left:290px;width:39px;height:39px;opacity:0}
#small_logo img:nth-of-type(2){position:absolute;top:119px;left:23px;width:30px;height:30px;opacity:0}
#small_logo img:nth-of-type(3){position:absolute;top:180px;left:54px;width:55px;height:55px;opacity:0}
#small_logo img:nth-of-type(4){position:absolute;top:50px;left:240px;width:58px;height:58px;opacity:0}
#small_logo img:nth-of-type(5){position:absolute;top:10px;left:102px;width:75px;height:75px;opacity:0}
#small_logo img:nth-of-type(6){position:absolute;top:147px;left:368px;width:65px;height:65px;opacity:0}

气泡逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
function bubbling(){
   try{
		 // 获取所有img
       var img0=document.getElementById('small_logo').getElementsByTagName('img');
   } catch(ev){
       return;
   }
   var a=0; // 延迟
   var m=10;
   for(var i=0;i<img0.length;i++){
       if(i%2==1){
           a-=0.2;
       }
       a+=0.3;
			 // 设置动画 - 添加类 - 出现
			 // small_logo1 - 出现效果 
			 // 0%{opacity:1;transform:scale(0)
			 // 100%{opacity:1;transform:scale(1)
       try{img0[i].style['-webkit-animation']="0.8s "+a+'s small_logo1';
           img0[i].style['-webkit-animation-fill-mode']='both';
           img0[i].style['-webkit-transition']="all 1s 2s";
       } catch(ev){
           img0[i].style.animation="0.8s "+a+'s small_logo1';
           img0[i].style['animation-fill-mode']='both';
           img0[i].style.transition="all 1s 2s";
       }
   }
	  // 设置动画 - 添加类 - 移动 - 浮动效果！
		// move3_2 
		// 0%,100%{transform:translate(0,0)
		// 90%{transform:translate(-10px,10px)
   setTimeout(function(){
       for(var i=0;i<img0.length;i++){
           if(window.navigator.userAgent.toLowerCase().indexOf("webkit")!=-1){
               m>30 ? m+=3:m+=5;
           }else{
               m>10 ? m+=3:m+=5;
           }
           img0[i].style.opacity=1;
           if(i%3==0){
               try{
                   img0[i].style['-webkit-animation']=m+'s move3_2 infinite';
               } catch(ev){
                   img0[i].style.animation=m+'s move3_2 infinite';
               }
           }
           if(i%3==1){
               try{
                   img0[i].style['-webkit-animation']=m+'s move3_1 infinite';
               } catch(ev){
                   img0[i].style.animation=m+'s move3_1 infinite';
               }
           }
           if(i%3==2){
               try{
                   img0[i].style['-webkit-animation']=m+'s move3_3 infinite';
               } catch(ev){
                   img0[i].style.animation=m+'s move3_3 infinite';
               }
           }
       }
   },2000)
}

彩虹结构：彩虹图片 + 遮罩层
遮罩层 - 两个，一个左边，一个右边
左边固定 - 遮住彩虹底部
右边固定 - 遮住彩虹底部
彩虹图片 - 滚动 - 旋转z轴 - 因为遮罩层挡住了，有滚动出现的效果。

1
2
3
<img src='image/three/09.png' alt='' class='three6'>\
<div class='three6_mask1'></div><div class='three6_mask2'></div>\
<div class='three6_mask3'></div>\

彩虹样式：

z-index:0 - 遮罩排上用场了 - 其他内容的z-index 要大于彩虹
transform:rotateZ(-180deg) - 滚动动画
opacity:0 - 出现效果

background-color:#09c - 遮罩层和背景颜色一致

1
2
3
4
5
.three6{position:absolute;top:167px;left:88px;z-index:0;transform:rotateZ(-180deg);-webkit-transform:rotateZ(-180deg);opacity:0}
.three6_mask1{position:absolute;background-color:#09c;top:653px;height:155px;width:166px;left:90px;z-index:3;opacity:1}
.three6_mask2,.three6_mask3{background-color:#09c;z-index:2;opacity:1;position:absolute}
.three6_mask2{top:653px;height:300px;width:300px;left:616px} // 两个遮罩层，固定位置。
.three6_mask3{top:509px;height:230px;width:200px;left:800px}

界面五：

页面效果：

山出现 - 从右到左，向右倾斜，然后变正
企鹅出现 - 从上到下
汗滴出现 - 从上到下
栅栏横杆 - 从左到右 - 滚动出现
栅栏出现 - 一个一个从上到下出现
中间人物出现 - 从上到下 + 披风动画 + 点头动画
左右人物出现 - 左从右出现，右从左出现 + 旗杆动画

难点：

  1. 栅栏出现
  2. 点头动画
  3. 披风动画
  4. 旗杆动画

栅栏结构：主要靠js添加 li

1
2
<div class="diamond"></div>\ 栅栏横杆
<ul class="hedge"></ul>\

栅栏样式：

1
2
3
.hedge{position:absolute;display:block;top:356px;left:238px;width:600px;height:600px}
.hedge li{top:0;left:0;display:block;transition:all .2s;-webkit-transition:all .2s} // transition
.diamond{height:12px;position:absolute;top:513px;left:227px;width:0;background-color:#46b8dd} // width:0;

栅栏逻辑：
先添加dom
动画根据 - 个数 、 宽度大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function hedge(){
	// 找到dom
  var hedge=document.getElementsByClassName('hedge')[0];
  var diamond=document.getElementsByClassName("diamond")[0];
	// 添加dom
  for(var i=0;i<18;i++){
      var li=document.createElement('li');
      var img=document.createElement('img');
      li.appendChild(img);
      li.style.left=i*31+"px"; // 设置左间距
      img.src='image/four/four_hedge.png';
      if(hedge){
          hedge.appendChild(li) // 添加：
      }else{
          return;
      }
  }
  var n=0;
  var x=0;
  var timer;
  var timer1;
	// 栅栏动画
  timer=setInterval(function(){
      hedge.children[n].style.top=130+"px"; // 统一高度
      hedge.children[n].style.opacity=1;
      n++;
      if(n>=18){
          clearInterval(timer); // 清除动画
      }
  },30); // 动画周期
	
	// 栅栏横杆动画！
  setTimeout(function(){
      timer1=setInterval(function(){
          x+=9;
          diamond.style.width=x+"px"; // 增加宽度
          if(x>560){
              clearInterval(timer1) // 清除动画
          }
      },10)
  },200)
}

点头动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结构
<div class="man_center">\
	<img src="image/four/four_man3.png" class="center_man3">\
	<img src="image/four/four_shade.png" class="center_man4">\
	<img src="image/four/four_man1.png"  class="center_man1">\ // 这个
	<img src="image/four/four_man2.png" class="center_man2">\
</div>\

样式 - 设置top
@keyframes man_head{0%,100%,4%,8%{top:0}
2%,6%{top:5px}
}

逻辑
$(".center_man1").css({animation:'3s 2.4s infinite  man_head ','-webkit-animation':'3s 2.4s infinite  man_head '})

披风动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
结构
<div class="man_center">\
	<img src="image/four/four_man3.png" class="center_man3">\ // 这个
	<img src="image/four/four_shade.png" class="center_man4">\
	<img src="image/four/four_man1.png"  class="center_man1">\ 
	<img src="image/four/four_man2.png" class="center_man2">\
</div>\

样式 - transform:rotateX(150deg)
@keyframes man_center3{10%{transform-origin:bottom;transform:rotateX(100deg)}
100%{transform-origin:bottom;transform:rotateX(150deg)}
}


逻辑
$(".center_man3").css({'animation':"1.3s 1.9s man_center3","animation-fill-mode":"both",'-webkit-animation':"1.3s 1.9s man_center3","-webkit-animation-fill-mode":"both"})

旗杆动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结构
<div class="man_left">\
	<img src="image/four/four_flagpole.png" class="leftpore">\
	<img src="image/four/four_leftman.png" class="leftman">\
	<img src="image/four/four_leftflag.png" class="leftflag">\ // 这个
</div>\

样式 - transform:skew(10deg) rotateX(-20deg)
@keyframes leftflag{0%,65%{transform-origin:top;transform:skew(0) rotateX(0)}
30%{transform-origin:top left;transform:skew(-8deg) rotateX(-20deg)}
100%{transform-origin:top right;transform:skew(10deg) rotateX(-20deg)}
}

逻辑
$(".leftflag").css({animation:'6s 2.5s leftflag infinite alternate','-webkit-animation':'6s 2.5s leftflag infinite alternate'})

界面六：

页面效果：

山出现 - 从下往上
云出现 - 从下往上
背景光出现 - 由小到大 + 旋转动画
中间图片出现 - 由小到大
标志出现 - 由小到大，在变小。
文字出现

难点：

  1. 背景光照

背景光照结构:
两张图片，一个做背景光，一个做滚动效果
01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
结构：
<img src="image/five/bg.png" class="five_bg1">\
<img src="image/five/bg2222.png" class="five_bg2">\

样式：
.five_bg1{position:absolute;width:900px;left:39px;top:189px;z-index:2;transform-origin:bottom center;transform:scale(0);-webkit-transform-origin:bottom center;-webkit-transform:scale(0)}
.five_bg2{width:740px;left:143px;top:217px;z-index:1} // 滚动图片

@keyframes bg2{0%{transform:rotateZ(0)} // z轴滚动
100%{transform:rotateZ(180deg)}
}

逻辑
// 主要是出现效果
$('.five_bg1').css({transition:'transform 0.3s 0.4s',"transform-origin": "bottom center",transform: "scale(1)",'-webkit-transition':'transform 0.3s 0.4s',"-webkit-transform-origin": "bottom center",'-webkit-transform': "scale(1)"})
// 滚动效果
$('.five_bg2').css({transition:'all 0.6s 0.7s',opacity:0.1,animation:"40s infinite bg2",'-webkit-transition':'all 0.6s 0.7s','-webkit-animation':"40s infinite bg2"})

逻辑处理

使用了两个计时器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
var indexTimer = null; // 当前页面动画。
var indexTimer3 = null; // 设置自动切换

// 设置自动播放。
function Interval() {
	indexTimer = setInterval(function() {
		last++;
		if (last >= $("#list1 li").length) {
			last = 0;
		}
		// 点击！
		execute(last);
	}, 10000);
};

// 加载对应的动画函数！
function execute(last) {
	$("#div00").html('');
	if (last != 3) { // 清除计时器
		clearInterval(btn3.timer22);
		btn3.timer22 = null;
		clearTimeout(btn3.timer11);
		btn3.timer11 = null;
	}
	if (last == 0) { // 加载当前的动画。
		//$("#css").attr("href","css/0.css");
		$("#div00").html(
			'<img src="image/first/f01.png" alt="" class="img0_1"><img src="image/first/f02.png" alt="" class=img0_2><img src="image/first/f03.png" alt="" class="img0_3"><img src="image/first/f04.png" alt="" class="img0_4"><img src="image/first/f05.png" alt="" class="img0_5">'
			);
		setTimeout(function() {
			f0(); // 执行动画。
		}, 100)
	}
	
	if (last == 1) {
		// $("#css").attr("href","css/1.css");
		$("#div00").html( // 写入内容
			'<img src="image/one/1.png" alt="" id="one_img1"> \
			<img src="image/one/2.png" alt="" id="one_img2"> \
			<div class="left_div show1"></div> \
			<img src="image/one/401.png" alt="" class="img401"> \
			<img src="image/one/402.png" alt="" class="img402"> \
			<img src="image/one/403.png" alt="" class="img403"> \
			<img src="image/one/404.png" alt="" class="img404"> \
			<img src="image/one/405.png" alt="" class="img405"> \
			<img src="image/one/60.png" alt="" class="img60"> \
			<div class="show601"></div>\
			<div class="show602"></div> \
			<div class="show603"></div>\
			<div class="show604"></div> \
			<div class="show605"></div> \
			<p class="one_2006" style="opacity: 0">2006</p> \
			<p class="one_text" style="opacity: 0"> \
				QQ用户同时在线突破2000万人，盗号问题开始形成</p>'
			)
			// 加载对应动画。
		setTimeout(function() {
			f1();
		}, 50)
	}
	
	// 设置按钮样式！
	$('#list1').children().attr('class', '');
	$("#list1 li").eq(last).attr('class', 'list1_active');
}

//  用户点击 - 加载对应动画。
function click() {
	$("#list1").children().click(function() {
		if ($(this).index() == last) { // 点击当前位置
			return;
		}
		clearInterval(indexTimer); // 清除计时器
		clearTimeout(indexTimer3);
		
		execute($(this).index()); // 加载对应动画
		last = $(this).index(); // 设置当前的index
		Interval(); // 自动切换保留。
	})
}

// 初始化！
execute(0);
indexTimer3 = setTimeout(function() {
	last++;
	execute(last);
	Interval();	
}, 3000);
click();

创建一个js文件，单独处理动画内容 - 添加类。。
这样可以在，每次点击按钮的时候，展示对应的动画内容。

收获总结

每个页面展现不同的动画 - Js动态写入页面。

如果需要处理很多小的元素，把他们放在一起 - 散装的放一起！

动画的执行，主要是靠添加类，Js动态添加，CSS先设置好动画效果，再执行。

增加动画的体验感主要有以下几点：

  1. 出现 - 每个元素出现时间不同，可以一步一步接收信息，从而达到了解全貌的效果
  2. 移动 - 是对出现效果的加强，可以从上到下，也可以从左到有，也可以做浮动效果
  3. 滚动 - 移动效果的加强，如箭头动画，彩虹动画，出色的效果，就像真的动画一样
  4. 循环 - 有一些元素的动画可以一直持续下去，可以感到整个页面的活力。如浮动，点头动画，旗杆动画等。
  5. 主体 - 主要人物一般有较大的变化，占的尺寸大，动态也大，起突出强调的作用

动画效果设置主要有以下几个属性：

  • position:absolute; - 主要定位属性

  • left:490px;top:285px; - 设置位置 - 移动效果 - 上到下，左到右等

  • transition:all .3s .45s- 动画效果

  • transform:rotateX(-80deg) skew(-30deg); 透视效果，旋转，斜切等

  • -webkit-transform-origin: 定位点，结合透视效果

  • opacity: 0 - 无到有

  • width: 0

  • scale(0)

  • z-index:5 - 遮罩层，前后关系

  • animation - 结合Js的动画效果 - 关键帧 - 设置延迟