一、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