更新示例项目及任务配置

TmT · May 26, 2015 · 0d1a7c3 · 0d1a7c3
1 parent b39b4ca
commit 0d1a7c3
Show file tree

Hide file tree

Showing 70 changed files with 2,096 additions and 27 deletions.
diff --git a/20150514-promo-vivo/.tmtworkflowrc b/20150514-promo-vivo/.tmtworkflowrc
@@ -0,0 +1,15 @@
+{
+  "livereload": {
+     "available": true,
+     "port": 8080,
+     "startPath": "html/index.html"
+   },
+
+  "plugins": {
+    "build_dev_after": ["reference"],
+    "build_dist_after": ["replace"],
+    "zip_after": []
+  },
+
+  "support_webp": false
+}
diff --git a/project/gulpfile.js → 20150514-promo-vivo/gulpfile.js b/project/gulpfile.js → 20150514-promo-vivo/gulpfile.js
@@ -2,7 +2,6 @@ var gulp = require('gulp');
 var fs = require('fs');
 var path = require('path');
 
-//注册
 var deep = 3;
 run_tasks('tasks');
 

diff --git a/20150514-promo-vivo/src/css/lib-animation.less b/20150514-promo-vivo/src/css/lib-animation.less
@@ -0,0 +1,324 @@
+@-webkit-keyframes anim-bg {
+    0% {
+        opacity: 0;
+    }
+    33.3% {
+        opacity: 1;
+    }
+    66.6% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.1;
+    }
+}
+
+@keyframes anim-bg {
+    0% {
+        opacity: 0;
+    }
+    33.3% {
+        opacity: 1;
+    }
+    66.6% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.1;
+    }
+}
+
+@-webkit-keyframes anim-txt {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(20px)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0)
+    }
+}
+
+
+@keyframes anim-txt {
+    0% {
+        opacity: 0;
+        transform: translateY(20px)
+    }
+    33.3% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+    66.6% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(20px)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0)
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px)
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+// 从左边移入
+@-webkit-keyframes leftToRightMove {
+    0% {
+        -webkit-transform: translate3d(-100px, 55px, 0);
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+    }
+}
+
+@keyframes leftToRightMove {
+    0% {
+        transform: translate3d(-100px, 55px, 0);
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+// 从右边移入
+@-webkit-keyframes rightToLeftMove {
+    0% {
+        -webkit-transform: translate3d(100px, -55px, 0);
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+    }
+}
+
+@keyframes rightToLeftMove {
+    0% {
+        transform: translate3d(100px, -55px, 0);
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@-webkit-keyframes downToTopMove {
+    0% {
+        -webkit-transform: translate3d(0px, 55px, 0);
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+    }
+}
+
+@keyframes downToTopMove {
+    0% {
+        transform: translate3d(0px, 55px, 0);
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@-webkit-keyframes topToDownMove_1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate3d(0px, 0px, 0);
+    }
+    80% {
+        opacity: 0.5;
+        -webkit-transform: translate3d(0px, 25px, 0);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0px, 25px, 0);
+    }
+}
+
+@-webkit-keyframes topToDownMove_2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate3d(0px, 0px, 0);
+    }
+    80% {
+        opacity: 0.5;
+        -webkit-transform: translate3d(0px, 60px, 0);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0px, 60px, 0);
+    }
+}
+
+@-webkit-keyframes topToDownMove_3 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translate3d(0px, 0px, 0);
+    }
+    80% {
+        opacity: 0.5;
+        -webkit-transform: translate3d(0px, 80px, 0);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0px, 80px, 0);
+    }
+}
+
+@-webkit-keyframes circleMove3 {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        -webkit-transform: translate3d(10px, -5px, 0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes circleMove4 {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        -webkit-transform: translate3d(30px, -15px, 0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes circleMove5 {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        -webkit-transform: translate3d(50px, -30px, 0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes circleMove6 {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        -webkit-transform: translate3d(70px, -45px, 0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes circleMove7 {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        -webkit-transform: translate3d(90px, -55px, 0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes circleMove8 {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        -webkit-transform: translate3d(110px, -70px, 0);
+        opacity: 1;
+    }
+}
+
+// 左滑提示
+@-webkit-keyframes swipeMove {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 10px, 0);
+    }
+    70% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -10px, 0);
+    }
+}
+
+@keyframes swipeMove {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, 10px, 0);
+    }
+    70% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(0, -10px, 0);
+    }
+}
+