动态H5

一、CreateJs系列

• 1、preloadJs 预加载资源文件(图片、音乐…)
• 2、soundJs 音频控制
• 3、easelJs 图形动画
• 4、TweenJs 补间动画

二、jquery

三、PageResponse.js 页面响应式框架

四、textillate.js 文字动画效果

  需强依赖 lettering.js、jquery、animate.css

五、TweenMax.js 动画相关

六、swiper.js

---

六、demo效果例子

1、TweenMax 左右抖动

TweenMax.to(".xxx", .1, {     rotationZ: 1,    rotationZ: -1,    repeat: -1,    ease: Bounce.easeInOut});

2、CSS3实现闪烁动画效果【改变亮度忽明忽暗】

.className{      -webkit-animation: twinkling 2s infinite ease-in-out;    animation: twinkling 2s infinite ease-in-out  }   @-webkit-keyframes twinkling{      0%{          opacity: 0.8;      }      100%{          opacity: 1;      }  }  @keyframes twinkling{      0%{          opacity: 0.8;      }      100%{          opacity: 1;      }  }  

3、css3圆形光环闪烁效果【圆环撑开, 轻微变大】

.className{     -webkit-animation: scaleout 1.3s infinite ease-in-out;     animation: scaleout 1.3s infinite ease-in-out;}@-webkit-keyframes scaleout {    0% { -webkit-transform: scale(1.0) }    100% {        -webkit-transform: scale(1.1);        opacity: 0;    }}@keyframes scaleout {    0% {        transform: scale(1.0);    } 100% {          transform: scale(1.1);          opacity: 0;      }}

参考链接

1、css3各种效果样式
http://www.xwcms.net/js/list/css3sl/css3sl_1.html