dlstatic / seven-piece · Commits

Commit 93c87af04ce3fda895af8ca867bac7983bed5819

Authored by dlstatic
1 parent 741fd530

add css animation move.

Inline Side-by-side
Showing 8 changed files with 279 additions and 1 deletions
.gitignore
  View file @93c87af
1 1 images/node_modules/
  2 +node_modules
... ...
Gruntfile.js 0 → 100644
  View file @93c87af
  1 +'use strict';
  2 +
  3 +module.exports = function (grunt) {
  4 + grunt.initConfig({
  5 + pkg: grunt.file.readJSON('package.json'),
  6 + less: {
  7 + dist: {
  8 + files:
  9 + [
  10 + {
  11 + expand: true,
  12 + cwd: 'css',
  13 + src: ['*.less'],
  14 + dest: 'css',
  15 + ext: '.css'
  16 + }
  17 + ]
  18 + }
  19 + },
  20 + watch: {
  21 + options: {
  22 + nospawn: true
  23 + },
  24 + css: {
  25 + files: [
  26 + 'css/*.less',
  27 + ],
  28 + tasks: ['less'],
  29 + options: {
  30 + livereload: true
  31 + }
  32 + }
  33 + }
  34 + });
  35 +
  36 + grunt.loadNpmTasks( "grunt-contrib-less" );
  37 + grunt.loadNpmTasks( "grunt-contrib-watch" );
  38 + // grunt.loadNpmTasks('grunt-spritesmith');
  39 +
  40 + grunt.registerTask('default', [
  41 + 'less', 'watch'
  42 + ]);
  43 +};
... ...
css/common.css
  View file @93c87af
... ... @@ -1125,3 +1125,72 @@ Pagination Styles
1125 1125 height: 2px;
1126 1126 background-color: #23ac38;
1127 1127 }
  1128 +.m-tab.hasright {
  1129 + position: relative;
  1130 +}
  1131 +.m-tab.hasright:before {
  1132 + content: ' ';
  1133 + display: block;
  1134 + position: absolute;
  1135 + top: 18px;
  1136 + left: 94%;
  1137 + width: 0;
  1138 + height: 0;
  1139 + border-style: solid;
  1140 + border-width: 5px 0 5px 5px;
  1141 + border-color: transparent transparent transparent #23ac38;
  1142 + transform: scaleY(1);
  1143 + animation: movehint 1.2s linear 3;
  1144 + -webkit-animation: movehint 1.2s linear 3;
  1145 + transition: all .3s;
  1146 + -webkit-transition: all .3s;
  1147 + opacity: 0;
  1148 +}
  1149 +.m-tab.hasright:after {
  1150 + content: ' ';
  1151 + display: block;
  1152 + position: absolute;
  1153 + top: 18px;
  1154 + left: 96%;
  1155 + width: 0;
  1156 + height: 0;
  1157 + border-style: solid;
  1158 + border-width: 5px 0 5px 5px;
  1159 + border-color: transparent transparent transparent #23ac38;
  1160 + transform: scaleY(1);
  1161 + animation: movehint 1.2s linear 3;
  1162 + -webkit-animation: movehint 1.2s linear 3;
  1163 + transition: all .3s;
  1164 + -webkit-transition: all .3s;
  1165 + opacity: 0;
  1166 +}
  1167 +@keyframes movehint {
  1168 + 0%,
  1169 + 20%,
  1170 + 53%,
  1171 + 80%,
  1172 + 100% {
  1173 + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1174 + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1175 + -webkit-transform: translate3d(0, 0, 0);
  1176 + transform: translate3d(0, 0, 0);
  1177 + opacity: 1;
  1178 + }
  1179 + 40%,
  1180 + 43% {
  1181 + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1182 + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1183 + -webkit-transform: translate3d(-20px, 0, 0);
  1184 + transform: translate3d(-20px, 0, 0);
  1185 + }
  1186 + 70% {
  1187 + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1188 + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1189 + -webkit-transform: translate3d(-10px, 0, 0);
  1190 + transform: translate3d(-10px, 0, 0);
  1191 + }
  1192 + 90% {
  1193 + -webkit-transform: translate3d(-4px, 0, 0);
  1194 + transform: translate3d(-4px, 0, 0);
  1195 + }
  1196 +}
... ...
css/tab.css
  View file @93c87af
... ... @@ -65,3 +65,72 @@
65 65 height: 2px;
66 66 background-color: #23ac38;
67 67 }
  68 +.m-tab.hasright {
  69 + position: relative;
  70 +}
  71 +.m-tab.hasright:before {
  72 + content: ' ';
  73 + display: block;
  74 + position: absolute;
  75 + top: 18px;
  76 + left: 94%;
  77 + width: 0;
  78 + height: 0;
  79 + border-style: solid;
  80 + border-width: 5px 0 5px 5px;
  81 + border-color: transparent transparent transparent #23ac38;
  82 + transform: scaleY(1);
  83 + animation: movehint 1.2s linear 3;
  84 + -webkit-animation: movehint 1.2s linear 3;
  85 + transition: all .3s;
  86 + -webkit-transition: all .3s;
  87 + opacity: 0;
  88 +}
  89 +.m-tab.hasright:after {
  90 + content: ' ';
  91 + display: block;
  92 + position: absolute;
  93 + top: 18px;
  94 + left: 96%;
  95 + width: 0;
  96 + height: 0;
  97 + border-style: solid;
  98 + border-width: 5px 0 5px 5px;
  99 + border-color: transparent transparent transparent #23ac38;
  100 + transform: scaleY(1);
  101 + animation: movehint 1.2s linear 3;
  102 + -webkit-animation: movehint 1.2s linear 3;
  103 + transition: all .3s;
  104 + -webkit-transition: all .3s;
  105 + opacity: 0;
  106 +}
  107 +@keyframes movehint {
  108 + 0%,
  109 + 20%,
  110 + 53%,
  111 + 80%,
  112 + 100% {
  113 + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  114 + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  115 + -webkit-transform: translate3d(0, 0, 0);
  116 + transform: translate3d(0, 0, 0);
  117 + opacity: 1;
  118 + }
  119 + 40%,
  120 + 43% {
  121 + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  122 + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  123 + -webkit-transform: translate3d(-20px, 0, 0);
  124 + transform: translate3d(-20px, 0, 0);
  125 + }
  126 + 70% {
  127 + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  128 + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  129 + -webkit-transform: translate3d(-10px, 0, 0);
  130 + transform: translate3d(-10px, 0, 0);
  131 + }
  132 + 90% {
  133 + -webkit-transform: translate3d(-4px, 0, 0);
  134 + transform: translate3d(-4px, 0, 0);
  135 + }
  136 +}
... ...
css/tab.less
  View file @93c87af
... ... @@ -71,4 +71,71 @@
71 71 }
72 72 }
73 73 }
  74 + &.hasright {
  75 + position: relative;
  76 + &:before {
  77 + content: ' ';
  78 + display: block;
  79 + position: absolute;
  80 + top: 18px;
  81 + left: 94%;
  82 + width: 0;
  83 + height: 0;
  84 + border-style: solid;
  85 + border-width: 5px 0 5px 5px;
  86 + border-color: transparent transparent transparent #23ac38;
  87 + transform: scaleY(1);
  88 + animation: movehint 1.2s linear 3;
  89 + -webkit-animation: movehint 1.2s linear 3;
  90 + transition: all .3s;
  91 + -webkit-transition: all .3s;
  92 + opacity: 0;
  93 + }
  94 + &:after {
  95 + content: ' ';
  96 + display: block;
  97 + position: absolute;
  98 + top: 18px;
  99 + left: 96%;
  100 + width: 0;
  101 + height: 0;
  102 + border-style: solid;
  103 + border-width: 5px 0 5px 5px;
  104 + border-color: transparent transparent transparent #23ac38;
  105 + transform: scaleY(1);
  106 + animation: movehint 1.2s linear 3;
  107 + -webkit-animation: movehint 1.2s linear 3;
  108 + transition: all .3s;
  109 + -webkit-transition: all .3s;
  110 + opacity: 0;
  111 + }
  112 + }
  113 +}
  114 +@keyframes movehint {
  115 + 0%, 20%, 53%, 80%, 100% {
  116 + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  117 + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  118 + -webkit-transform: translate3d(0,0,0);
  119 + transform: translate3d(0,0,0);
  120 + opacity: 1;
  121 + }
  122 +
  123 + 40%, 43% {
  124 + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  125 + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  126 + -webkit-transform: translate3d(-20px, 0, 0);
  127 + transform: translate3d(-20px, 0, 0);
  128 + }
  129 +
  130 + 70% {
  131 + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  132 + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  133 + -webkit-transform: translate3d(-10px, 0, 0);
  134 + transform: translate3d(-10px, 0, 0);
  135 + }
  136 +
  137 + 90% {
  138 + -webkit-transform: translate3d(-4px, 0, 0);
  139 + transform: translate3d(-4px, 0, 0);
  140 + }
74 141 }
... ...
css/util.css
  View file @93c87af
... ... @@ -139,6 +139,9 @@ a.m-more {
139 139 .background-gray {
140 140 background-color: #666 !important;
141 141 }
  142 +.background-deep-gray {
  143 + background-color: #444 !important;
  144 +}
142 145 .background-yellow {
143 146 background-color: #FF9D2C !important;
144 147 }
... ...
html/index.html
  View file @93c87af
... ... @@ -319,7 +319,7 @@
319 319  
320 320 <!-- tab -->
321 321 <div class="scroll-wrap background-white">
322   - <ul class="m-tab border-1px border-bottom">
  322 + <ul class="m-tab border-1px border-bottom hasright">
323 323 <li class="on"><a href="#">今日必抢</a></li>
324 324 <li><a href="#">名古屋</a></li>
325 325 <li><a href="#">我是吃货</a></li>
... ...
package.json 0 → 100644
  View file @93c87af
  1 +{
  2 + "name": "seven-piece",
  3 + "version": "1.0.0",
  4 + "description": "static source",
  5 + "main": "index.js",
  6 + "scripts": {
  7 + "test": "node index.js"
  8 + },
  9 + "repository": {
  10 + "type": "git",
  11 + "url": "git@git3.diligrp.com:dlstatic/seven-piece.git"
  12 + },
  13 + "keywords": [
  14 + "seven",
  15 + "static",
  16 + "manage"
  17 + ],
  18 + "author": "DiliFE",
  19 + "license": "MIT",
  20 + "devDependencies": {
  21 + "grunt": "^0.4.5",
  22 + "grunt-contrib-less": "^1.0.1",
  23 + "grunt-contrib-watch": "^0.6.1",
  24 + "less": "^2.5.1"
  25 + }
  26 +}
... ...