动态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