├── .gitignore
├── CSS
    └── csshake.css
├── Demo
    ├── WebSocket.html
    └── camera-cut.html
├── JS
    ├── 001.Date
    │   └── main.js
    ├── 002.Excel
    │   ├── Blob.js
    │   └── Export2Excel.js
    ├── 003.Utils
    │   └── main.js
    ├── 004.Num
    │   └── main.js
    ├── 005.Canvas
    │   ├── f2-canvas
    │   │   ├── f2-canvas.js
    │   │   ├── f2-canvas.json
    │   │   ├── f2-canvas.wxml
    │   │   ├── f2-canvas.wxss
    │   │   └── lib
    │   │   │   ├── EventEmitter.min.js
    │   │   │   ├── f2.js
    │   │   │   └── renderer.js
    │   └── main.js
    ├── 006.Animation
    │   └── ripple-min.js
    ├── 007.window
    │   └── index.js
    ├── 008.Array
    │   └── index.js
    ├── 009.markdown
    │   └── sort-api.js
    ├── 010.git
    │   └── generate-authors.js
    └── main.js
├── LICENSE
├── README.md
└── Shell
    └── git-history.sh


/.gitignore:
--------------------------------------------------------------------------------
 1 | # @source: https://github.com/xrkffgg/gitignore/blob/master/.gitignore
 2 | 
 3 | # Normal
 4 | .DS_Store
 5 | node_modules
 6 | /dist
 7 | .sass-cache/
 8 | 
 9 | # Lock
10 | yarn.lock
11 | package-lock.json
12 | 
13 | # local env files
14 | .env.local
15 | .env.*.local
16 | 
17 | # Compiled file
18 | *.class
19 | *.css.map
20 | *.sass.map
21 | *.scss.map
22 | 
23 | # Log file
24 | *.log
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | 
29 | # Editor directories and files
30 | .idea
31 | .vscode
32 | *.suo
33 | *.ntvs*
34 | *.njsproj
35 | *.sln
36 | *.sw?
37 | ~$*.*


--------------------------------------------------------------------------------
/CSS/csshake.css:
--------------------------------------------------------------------------------
   1 | .shake { display: inline-block; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; }
   2 | .shake:hover { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
   3 | .shake.freez { -webkit-animation-play-state: paused !important; -ms-animation-play-state: paused !important; animation-play-state: paused !important; }
   4 | .shake.freez.shake-hard { -webkit-animation-name: shake-hard; -ms-animation-name: shake-hard; animation-name: shake-hard; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
   5 | .shake.freez.shake-slow { -webkit-animation-name: shake-slow; -ms-animation-name: shake-slow; animation-name: shake-slow; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
   6 | .shake.freez.shake-little { -webkit-animation-name: shake-little; -ms-animation-name: shake-little; animation-name: shake-little; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
   7 | .shake.freez.shake-horizontal { -webkit-animation-name: shake-horizontal; -ms-animation-name: shake-horizontal; animation-name: shake-horizontal; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
   8 | .shake.freez.shake-vertical { -webkit-animation-name: shake-vertical; -ms-animation-name: shake-vertical; animation-name: shake-vertical; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
   9 | .shake.freez.shake-rotate { -webkit-animation-name: shake-rotate; -ms-animation-name: shake-rotate; animation-name: shake-rotate; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  10 | .shake.freez.shake-opacity { -webkit-animation-name: shake-opacity; -ms-animation-name: shake-opacity; animation-name: shake-opacity; -webkit-animation-duration: 200ms; -ms-animation-duration: 200ms; animation-duration: 200ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  11 | .shake.freez.shake-crazy { -webkit-animation-name: shake-crazy; -ms-animation-name: shake-crazy; animation-name: shake-crazy; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  12 | .shake.freez:hover { -webkit-animation-play-state: running !important; -ms-animation-play-state: running !important; animation-play-state: running !important; }
  13 | .shake.shake-hard:hover { -webkit-animation-name: shake-hard; -ms-animation-name: shake-hard; animation-name: shake-hard; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  14 | .shake.shake-slow:hover { -webkit-animation-name: shake-slow; -ms-animation-name: shake-slow; animation-name: shake-slow; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  15 | .shake.shake-little:hover { -webkit-animation-name: shake-little; -ms-animation-name: shake-little; animation-name: shake-little; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  16 | .shake.shake-horizontal:hover { -webkit-animation-name: shake-horizontal; -ms-animation-name: shake-horizontal; animation-name: shake-horizontal; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  17 | .shake.shake-vertical:hover { -webkit-animation-name: shake-vertical; -ms-animation-name: shake-vertical; animation-name: shake-vertical; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  18 | .shake.shake-rotate:hover { -webkit-animation-name: shake-rotate; -ms-animation-name: shake-rotate; animation-name: shake-rotate; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  19 | .shake.shake-opacity:hover { -webkit-animation-name: shake-opacity; -ms-animation-name: shake-opacity; animation-name: shake-opacity; -webkit-animation-duration: 200ms; -ms-animation-duration: 200ms; animation-duration: 200ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  20 | .shake.shake-crazy:hover { -webkit-animation-name: shake-crazy; -ms-animation-name: shake-crazy; animation-name: shake-crazy; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  21 | .shake.shake-constant { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  22 | .shake.shake-constant.shake-hard { -webkit-animation-name: shake-hard; -ms-animation-name: shake-hard; animation-name: shake-hard; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  23 | .shake.shake-constant.shake-slow { -webkit-animation-name: shake-slow; -ms-animation-name: shake-slow; animation-name: shake-slow; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  24 | .shake.shake-constant.shake-little { -webkit-animation-name: shake-little; -ms-animation-name: shake-little; animation-name: shake-little; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  25 | .shake.shake-constant.shake-horizontal { -webkit-animation-name: shake-horizontal; -ms-animation-name: shake-horizontal; animation-name: shake-horizontal; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  26 | .shake.shake-constant.shake-vertical { -webkit-animation-name: shake-vertical; -ms-animation-name: shake-vertical; animation-name: shake-vertical; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  27 | .shake.shake-constant.shake-rotate { -webkit-animation-name: shake-rotate; -ms-animation-name: shake-rotate; animation-name: shake-rotate; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  28 | .shake.shake-constant.shake-opacity { -webkit-animation-name: shake-opacity; -ms-animation-name: shake-opacity; animation-name: shake-opacity; -webkit-animation-duration: 200ms; -ms-animation-duration: 200ms; animation-duration: 200ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  29 | .shake.shake-constant.shake-crazy { -webkit-animation-name: shake-crazy; -ms-animation-name: shake-crazy; animation-name: shake-crazy; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  30 | .shake.shake-constant.hover-stop:hover { -webkit-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; }
  31 | .shake.shake-delay { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
  32 | 
  33 | @-webkit-keyframes shake-base { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  34 |   2% { -webkit-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  35 |   4% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  36 |   6% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  37 |   8% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  38 |   10% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  39 |   12% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  40 |   14% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  41 |   16% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  42 |   18% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  43 |   20% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  44 |   22% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  45 |   24% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
  46 |   26% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  47 |   28% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  48 |   30% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  49 |   32% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  50 |   34% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
  51 |   36% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  52 |   38% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  53 |   40% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  54 |   42% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  55 |   44% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  56 |   46% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  57 |   48% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  58 |   50% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  59 |   52% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  60 |   54% { -webkit-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
  61 |   56% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  62 |   58% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  63 |   60% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  64 |   62% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }
  65 |   64% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  66 |   66% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  67 |   68% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  68 |   70% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
  69 |   72% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  70 |   74% { -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  71 |   76% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  72 |   78% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }
  73 |   80% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  74 |   82% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  75 |   84% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  76 |   86% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  77 |   88% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  78 |   90% { -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  79 |   92% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  80 |   94% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  81 |   96% { -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  82 |   98% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } }
  83 | 
  84 | @-ms-keyframes shake-base { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  85 |   2% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  86 |   4% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  87 |   6% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  88 |   8% { -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  89 |   10% { -ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg); }
  90 |   12% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  91 |   14% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  92 |   16% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  93 |   18% { -ms-transform: translate(1.5px, -0.5px) rotate(-1.5deg); }
  94 |   20% { -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg); }
  95 |   22% { -ms-transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
  96 |   24% { -ms-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  97 |   26% { -ms-transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
  98 |   28% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  99 |   30% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
 100 |   32% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
 101 |   34% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
 102 |   36% { -ms-transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
 103 |   38% { -ms-transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
 104 |   40% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
 105 |   42% { -ms-transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
 106 |   44% { -ms-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
 107 |   46% { -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg); }
 108 |   48% { -ms-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
 109 |   50% { -ms-transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
 110 |   52% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
 111 |   54% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
 112 |   56% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
 113 |   58% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
 114 |   60% { -ms-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
 115 |   62% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
 116 |   64% { -ms-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
 117 |   66% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
 118 |   68% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
 119 |   70% { -ms-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
 120 |   72% { -ms-transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
 121 |   74% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
 122 |   76% { -ms-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
 123 |   78% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
 124 |   80% { -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
 125 |   82% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
 126 |   84% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
 127 |   86% { -ms-transform: translate(-0.5px, 0.5px) rotate(-1.5deg); }
 128 |   88% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
 129 |   90% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
 130 |   92% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
 131 |   94% { -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
 132 |   96% { -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg); }
 133 |   98% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); } }
 134 | 
 135 | @keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
 136 |   2% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
 137 |   4% { transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
 138 |   6% { transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
 139 |   8% { transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
 140 |   10% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
 141 |   12% { transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
 142 |   14% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
 143 |   16% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
 144 |   18% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
 145 |   20% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
 146 |   22% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
 147 |   24% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
 148 |   26% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
 149 |   28% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
 150 |   30% { transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
 151 |   32% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
 152 |   34% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
 153 |   36% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
 154 |   38% { transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
 155 |   40% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
 156 |   42% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
 157 |   44% { transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
 158 |   46% { transform: translate(0.5px, -2.5px) rotate(0.5deg); }
 159 |   48% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
 160 |   50% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
 161 |   52% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
 162 |   54% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
 163 |   56% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
 164 |   58% { transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
 165 |   60% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
 166 |   62% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
 167 |   64% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
 168 |   66% { transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
 169 |   68% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
 170 |   70% { transform: translate(0.5px, 1.5px) rotate(0.5deg); }
 171 |   72% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
 172 |   74% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
 173 |   76% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
 174 |   78% { transform: translate(-0.5px, -2.5px) rotate(0.5deg); }
 175 |   80% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
 176 |   82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
 177 |   84% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
 178 |   86% { transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
 179 |   88% { transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
 180 |   90% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
 181 |   92% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
 182 |   94% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
 183 |   96% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
 184 |   98% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } }
 185 | 
 186 | @-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 187 |   2% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 188 |   4% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 189 |   6% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 190 |   8% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 191 |   10% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 192 |   12% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 193 |   14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 194 |   16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 195 |   18% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 196 |   20% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 197 |   22% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 198 |   24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 199 |   26% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 200 |   28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 201 |   30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 202 |   32% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 203 |   34% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 204 |   36% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 205 |   38% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 206 |   40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 207 |   42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 208 |   44% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 209 |   46% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 210 |   48% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 211 |   50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 212 |   52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 213 |   54% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 214 |   56% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 215 |   58% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 216 |   60% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 217 |   62% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 218 |   64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 219 |   66% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 220 |   68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 221 |   70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 222 |   72% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 223 |   74% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 224 |   76% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 225 |   78% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 226 |   80% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 227 |   82% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 228 |   84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 229 |   86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 230 |   88% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 231 |   90% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 232 |   92% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
 233 |   94% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
 234 |   96% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
 235 |   98% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } }
 236 | 
 237 | @-ms-keyframes shake-little { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 238 |   2% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 239 |   4% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 240 |   6% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 241 |   8% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 242 |   10% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 243 |   12% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 244 |   14% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 245 |   16% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 246 |   18% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 247 |   20% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 248 |   22% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 249 |   24% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 250 |   26% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 251 |   28% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 252 |   30% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 253 |   32% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 254 |   34% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 255 |   36% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 256 |   38% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 257 |   40% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 258 |   42% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 259 |   44% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 260 |   46% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 261 |   48% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 262 |   50% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 263 |   52% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 264 |   54% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 265 |   56% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 266 |   58% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 267 |   60% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 268 |   62% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 269 |   64% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 270 |   66% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 271 |   68% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 272 |   70% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 273 |   72% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 274 |   74% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 275 |   76% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 276 |   78% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 277 |   80% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 278 |   82% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 279 |   84% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 280 |   86% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
 281 |   88% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 282 |   90% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
 283 |   92% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 284 |   94% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 285 |   96% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
 286 |   98% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); } }
 287 | 
 288 | @keyframes shake-little { 0% { transform: translate(0px, 0px) rotate(0deg); }
 289 |   2% { transform: translate(0px, 0px) rotate(-0.5deg); }
 290 |   4% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 291 |   6% { transform: translate(0px, -1px) rotate(-0.5deg); }
 292 |   8% { transform: translate(0px, 0px) rotate(-0.5deg); }
 293 |   10% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 294 |   12% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 295 |   14% { transform: translate(0px, 0px) rotate(-0.5deg); }
 296 |   16% { transform: translate(0px, 0px) rotate(-0.5deg); }
 297 |   18% { transform: translate(0px, -1px) rotate(-0.5deg); }
 298 |   20% { transform: translate(0px, 0px) rotate(-0.5deg); }
 299 |   22% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 300 |   24% { transform: translate(0px, 0px) rotate(-0.5deg); }
 301 |   26% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 302 |   28% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 303 |   30% { transform: translate(0px, 0px) rotate(-0.5deg); }
 304 |   32% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 305 |   34% { transform: translate(0px, -1px) rotate(-0.5deg); }
 306 |   36% { transform: translate(0px, -1px) rotate(-0.5deg); }
 307 |   38% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 308 |   40% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 309 |   42% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 310 |   44% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 311 |   46% { transform: translate(0px, -1px) rotate(-0.5deg); }
 312 |   48% { transform: translate(0px, 0px) rotate(-0.5deg); }
 313 |   50% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 314 |   52% { transform: translate(0px, 0px) rotate(-0.5deg); }
 315 |   54% { transform: translate(0px, 0px) rotate(-0.5deg); }
 316 |   56% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 317 |   58% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 318 |   60% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 319 |   62% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 320 |   64% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 321 |   66% { transform: translate(0px, -1px) rotate(-0.5deg); }
 322 |   68% { transform: translate(0px, -1px) rotate(-0.5deg); }
 323 |   70% { transform: translate(0px, -1px) rotate(-0.5deg); }
 324 |   72% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 325 |   74% { transform: translate(0px, -1px) rotate(-0.5deg); }
 326 |   76% { transform: translate(0px, 0px) rotate(-0.5deg); }
 327 |   78% { transform: translate(-1px, -1px) rotate(-0.5deg); }
 328 |   80% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 329 |   82% { transform: translate(0px, -1px) rotate(-0.5deg); }
 330 |   84% { transform: translate(0px, 0px) rotate(-0.5deg); }
 331 |   86% { transform: translate(0px, 0px) rotate(-0.5deg); }
 332 |   88% { transform: translate(0px, 0px) rotate(-0.5deg); }
 333 |   90% { transform: translate(-1px, 0px) rotate(-0.5deg); }
 334 |   92% { transform: translate(0px, 0px) rotate(-0.5deg); }
 335 |   94% { transform: translate(0px, -1px) rotate(-0.5deg); }
 336 |   96% { transform: translate(0px, 0px) rotate(-0.5deg); }
 337 |   98% { transform: translate(0px, 0px) rotate(-0.5deg); } }
 338 | 
 339 | @-webkit-keyframes shake-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 340 |   2% { -webkit-transform: translate(-1px, 3px) rotate(-1.5deg); }
 341 |   4% { -webkit-transform: translate(-4px, 5px) rotate(-1.5deg); }
 342 |   6% { -webkit-transform: translate(-1px, 6px) rotate(-0.5deg); }
 343 |   8% { -webkit-transform: translate(5px, -4px) rotate(-3.5deg); }
 344 |   10% { -webkit-transform: translate(-7px, -3px) rotate(-3.5deg); }
 345 |   12% { -webkit-transform: translate(-1px, 8px) rotate(2.5deg); }
 346 |   14% { -webkit-transform: translate(3px, -5px) rotate(-1.5deg); }
 347 |   16% { -webkit-transform: translate(1px, 0px) rotate(2.5deg); }
 348 |   18% { -webkit-transform: translate(-6px, -10px) rotate(-0.5deg); }
 349 |   20% { -webkit-transform: translate(3px, -2px) rotate(1.5deg); }
 350 |   22% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
 351 |   24% { -webkit-transform: translate(-5px, -4px) rotate(1.5deg); }
 352 |   26% { -webkit-transform: translate(-1px, 3px) rotate(-3.5deg); }
 353 |   28% { -webkit-transform: translate(1px, 1px) rotate(-3.5deg); }
 354 |   30% { -webkit-transform: translate(-4px, 8px) rotate(1.5deg); }
 355 |   32% { -webkit-transform: translate(-9px, 7px) rotate(-3.5deg); }
 356 |   34% { -webkit-transform: translate(4px, -9px) rotate(-2.5deg); }
 357 |   36% { -webkit-transform: translate(1px, -6px) rotate(-2.5deg); }
 358 |   38% { -webkit-transform: translate(-4px, 0px) rotate(-2.5deg); }
 359 |   40% { -webkit-transform: translate(3px, -7px) rotate(0.5deg); }
 360 |   42% { -webkit-transform: translate(4px, 4px) rotate(-0.5deg); }
 361 |   44% { -webkit-transform: translate(8px, -4px) rotate(-2.5deg); }
 362 |   46% { -webkit-transform: translate(9px, 9px) rotate(-3.5deg); }
 363 |   48% { -webkit-transform: translate(6px, -8px) rotate(-0.5deg); }
 364 |   50% { -webkit-transform: translate(-1px, 4px) rotate(-3.5deg); }
 365 |   52% { -webkit-transform: translate(4px, 6px) rotate(-1.5deg); }
 366 |   54% { -webkit-transform: translate(9px, -3px) rotate(2.5deg); }
 367 |   56% { -webkit-transform: translate(8px, -2px) rotate(-3.5deg); }
 368 |   58% { -webkit-transform: translate(-2px, -9px) rotate(-0.5deg); }
 369 |   60% { -webkit-transform: translate(-1px, -5px) rotate(2.5deg); }
 370 |   62% { -webkit-transform: translate(-8px, 3px) rotate(2.5deg); }
 371 |   64% { -webkit-transform: translate(6px, -2px) rotate(-3.5deg); }
 372 |   66% { -webkit-transform: translate(-5px, 9px) rotate(-1.5deg); }
 373 |   68% { -webkit-transform: translate(3px, 1px) rotate(-0.5deg); }
 374 |   70% { -webkit-transform: translate(6px, 4px) rotate(-1.5deg); }
 375 |   72% { -webkit-transform: translate(-6px, -5px) rotate(1.5deg); }
 376 |   74% { -webkit-transform: translate(-8px, 0px) rotate(-0.5deg); }
 377 |   76% { -webkit-transform: translate(-5px, -8px) rotate(1.5deg); }
 378 |   78% { -webkit-transform: translate(5px, -3px) rotate(-1.5deg); }
 379 |   80% { -webkit-transform: translate(-6px, -3px) rotate(-1.5deg); }
 380 |   82% { -webkit-transform: translate(7px, 8px) rotate(-1.5deg); }
 381 |   84% { -webkit-transform: translate(-6px, 9px) rotate(0.5deg); }
 382 |   86% { -webkit-transform: translate(1px, 8px) rotate(-3.5deg); }
 383 |   88% { -webkit-transform: translate(-9px, -2px) rotate(1.5deg); }
 384 |   90% { -webkit-transform: translate(4px, -6px) rotate(-1.5deg); }
 385 |   92% { -webkit-transform: translate(0px, -1px) rotate(0.5deg); }
 386 |   94% { -webkit-transform: translate(2px, -9px) rotate(2.5deg); }
 387 |   96% { -webkit-transform: translate(-9px, 1px) rotate(-2.5deg); }
 388 |   98% { -webkit-transform: translate(-9px, -5px) rotate(-3.5deg); } }
 389 | 
 390 | @-ms-keyframes shake-slow { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 391 |   2% { -ms-transform: translate(-10px, 5px) rotate(-2.5deg); }
 392 |   4% { -ms-transform: translate(7px, 7px) rotate(-3.5deg); }
 393 |   6% { -ms-transform: translate(8px, -7px) rotate(-2.5deg); }
 394 |   8% { -ms-transform: translate(-8px, 3px) rotate(-0.5deg); }
 395 |   10% { -ms-transform: translate(3px, -10px) rotate(-1.5deg); }
 396 |   12% { -ms-transform: translate(-9px, -6px) rotate(2.5deg); }
 397 |   14% { -ms-transform: translate(-2px, -6px) rotate(-0.5deg); }
 398 |   16% { -ms-transform: translate(6px, -1px) rotate(0.5deg); }
 399 |   18% { -ms-transform: translate(5px, -1px) rotate(0.5deg); }
 400 |   20% { -ms-transform: translate(7px, -5px) rotate(-0.5deg); }
 401 |   22% { -ms-transform: translate(-8px, 5px) rotate(2.5deg); }
 402 |   24% { -ms-transform: translate(0px, 4px) rotate(2.5deg); }
 403 |   26% { -ms-transform: translate(-1px, 2px) rotate(-1.5deg); }
 404 |   28% { -ms-transform: translate(-1px, -1px) rotate(1.5deg); }
 405 |   30% { -ms-transform: translate(-5px, -5px) rotate(2.5deg); }
 406 |   32% { -ms-transform: translate(0px, 7px) rotate(-0.5deg); }
 407 |   34% { -ms-transform: translate(-9px, 3px) rotate(-0.5deg); }
 408 |   36% { -ms-transform: translate(3px, -5px) rotate(-2.5deg); }
 409 |   38% { -ms-transform: translate(5px, 2px) rotate(-0.5deg); }
 410 |   40% { -ms-transform: translate(6px, -3px) rotate(0.5deg); }
 411 |   42% { -ms-transform: translate(-4px, -6px) rotate(-0.5deg); }
 412 |   44% { -ms-transform: translate(9px, 2px) rotate(-3.5deg); }
 413 |   46% { -ms-transform: translate(6px, -4px) rotate(1.5deg); }
 414 |   48% { -ms-transform: translate(6px, 5px) rotate(2.5deg); }
 415 |   50% { -ms-transform: translate(-9px, -2px) rotate(-2.5deg); }
 416 |   52% { -ms-transform: translate(-7px, 9px) rotate(-0.5deg); }
 417 |   54% { -ms-transform: translate(-5px, -5px) rotate(-3.5deg); }
 418 |   56% { -ms-transform: translate(-6px, -10px) rotate(1.5deg); }
 419 |   58% { -ms-transform: translate(-3px, 1px) rotate(-3.5deg); }
 420 |   60% { -ms-transform: translate(3px, 5px) rotate(2.5deg); }
 421 |   62% { -ms-transform: translate(-1px, -8px) rotate(2.5deg); }
 422 |   64% { -ms-transform: translate(6px, -7px) rotate(-0.5deg); }
 423 |   66% { -ms-transform: translate(-7px, -1px) rotate(0.5deg); }
 424 |   68% { -ms-transform: translate(-3px, -4px) rotate(-1.5deg); }
 425 |   70% { -ms-transform: translate(-10px, 9px) rotate(2.5deg); }
 426 |   72% { -ms-transform: translate(9px, 9px) rotate(2.5deg); }
 427 |   74% { -ms-transform: translate(-6px, 8px) rotate(-0.5deg); }
 428 |   76% { -ms-transform: translate(-5px, -10px) rotate(-2.5deg); }
 429 |   78% { -ms-transform: translate(-7px, -9px) rotate(-0.5deg); }
 430 |   80% { -ms-transform: translate(8px, -4px) rotate(2.5deg); }
 431 |   82% { -ms-transform: translate(9px, 4px) rotate(-0.5deg); }
 432 |   84% { -ms-transform: translate(-1px, -1px) rotate(2.5deg); }
 433 |   86% { -ms-transform: translate(-6px, -3px) rotate(0.5deg); }
 434 |   88% { -ms-transform: translate(-2px, -4px) rotate(0.5deg); }
 435 |   90% { -ms-transform: translate(5px, 1px) rotate(0.5deg); }
 436 |   92% { -ms-transform: translate(1px, 2px) rotate(-3.5deg); }
 437 |   94% { -ms-transform: translate(-5px, -10px) rotate(1.5deg); }
 438 |   96% { -ms-transform: translate(-6px, 3px) rotate(-3.5deg); }
 439 |   98% { -ms-transform: translate(-1px, -7px) rotate(-2.5deg); } }
 440 | 
 441 | @keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg); }
 442 |   2% { transform: translate(6px, -7px) rotate(2.5deg); }
 443 |   4% { transform: translate(8px, -8px) rotate(2.5deg); }
 444 |   6% { transform: translate(1px, -8px) rotate(-3.5deg); }
 445 |   8% { transform: translate(-3px, 4px) rotate(-0.5deg); }
 446 |   10% { transform: translate(0px, -3px) rotate(1.5deg); }
 447 |   12% { transform: translate(-1px, 2px) rotate(0.5deg); }
 448 |   14% { transform: translate(6px, 6px) rotate(-1.5deg); }
 449 |   16% { transform: translate(-7px, 4px) rotate(-0.5deg); }
 450 |   18% { transform: translate(7px, 8px) rotate(-3.5deg); }
 451 |   20% { transform: translate(-6px, 2px) rotate(1.5deg); }
 452 |   22% { transform: translate(9px, 5px) rotate(-1.5deg); }
 453 |   24% { transform: translate(7px, -2px) rotate(0.5deg); }
 454 |   26% { transform: translate(-7px, -10px) rotate(-0.5deg); }
 455 |   28% { transform: translate(-10px, -8px) rotate(-1.5deg); }
 456 |   30% { transform: translate(8px, 4px) rotate(0.5deg); }
 457 |   32% { transform: translate(0px, 4px) rotate(1.5deg); }
 458 |   34% { transform: translate(-8px, 6px) rotate(-0.5deg); }
 459 |   36% { transform: translate(-5px, 7px) rotate(1.5deg); }
 460 |   38% { transform: translate(-4px, -4px) rotate(-1.5deg); }
 461 |   40% { transform: translate(9px, 4px) rotate(-1.5deg); }
 462 |   42% { transform: translate(9px, -5px) rotate(2.5deg); }
 463 |   44% { transform: translate(-5px, -4px) rotate(-2.5deg); }
 464 |   46% { transform: translate(7px, -7px) rotate(1.5deg); }
 465 |   48% { transform: translate(-5px, 8px) rotate(0.5deg); }
 466 |   50% { transform: translate(9px, 1px) rotate(-1.5deg); }
 467 |   52% { transform: translate(-9px, -5px) rotate(-3.5deg); }
 468 |   54% { transform: translate(-2px, 9px) rotate(1.5deg); }
 469 |   56% { transform: translate(6px, -1px) rotate(1.5deg); }
 470 |   58% { transform: translate(-6px, 0px) rotate(-0.5deg); }
 471 |   60% { transform: translate(3px, 1px) rotate(1.5deg); }
 472 |   62% { transform: translate(5px, -7px) rotate(-0.5deg); }
 473 |   64% { transform: translate(9px, 2px) rotate(2.5deg); }
 474 |   66% { transform: translate(6px, 0px) rotate(-2.5deg); }
 475 |   68% { transform: translate(5px, -4px) rotate(-2.5deg); }
 476 |   70% { transform: translate(-8px, 5px) rotate(-2.5deg); }
 477 |   72% { transform: translate(-6px, -2px) rotate(0.5deg); }
 478 |   74% { transform: translate(-3px, 7px) rotate(-3.5deg); }
 479 |   76% { transform: translate(-7px, -8px) rotate(-3.5deg); }
 480 |   78% { transform: translate(-1px, -2px) rotate(2.5deg); }
 481 |   80% { transform: translate(8px, 6px) rotate(-2.5deg); }
 482 |   82% { transform: translate(-2px, -9px) rotate(2.5deg); }
 483 |   84% { transform: translate(8px, -10px) rotate(-0.5deg); }
 484 |   86% { transform: translate(-6px, 0px) rotate(2.5deg); }
 485 |   88% { transform: translate(-1px, 9px) rotate(-3.5deg); }
 486 |   90% { transform: translate(-7px, 8px) rotate(1.5deg); }
 487 |   92% { transform: translate(-10px, -8px) rotate(0.5deg); }
 488 |   94% { transform: translate(-8px, 6px) rotate(1.5deg); }
 489 |   96% { transform: translate(4px, -9px) rotate(2.5deg); }
 490 |   98% { transform: translate(-4px, 9px) rotate(0.5deg); } }
 491 | 
 492 | @-webkit-keyframes shake-hard { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 493 |   2% { -webkit-transform: translate(-5px, -7px) rotate(-3.5deg); }
 494 |   4% { -webkit-transform: translate(-9px, -7px) rotate(-0.5deg); }
 495 |   6% { -webkit-transform: translate(-3px, -1px) rotate(-0.5deg); }
 496 |   8% { -webkit-transform: translate(2px, -8px) rotate(-3.5deg); }
 497 |   10% { -webkit-transform: translate(-2px, -4px) rotate(0.5deg); }
 498 |   12% { -webkit-transform: translate(-8px, 6px) rotate(2.5deg); }
 499 |   14% { -webkit-transform: translate(-1px, 3px) rotate(-0.5deg); }
 500 |   16% { -webkit-transform: translate(-7px, 0px) rotate(1.5deg); }
 501 |   18% { -webkit-transform: translate(-6px, -6px) rotate(2.5deg); }
 502 |   20% { -webkit-transform: translate(-8px, 5px) rotate(2.5deg); }
 503 |   22% { -webkit-transform: translate(-3px, 1px) rotate(-1.5deg); }
 504 |   24% { -webkit-transform: translate(-7px, 5px) rotate(0.5deg); }
 505 |   26% { -webkit-transform: translate(1px, 8px) rotate(0.5deg); }
 506 |   28% { -webkit-transform: translate(-4px, 5px) rotate(2.5deg); }
 507 |   30% { -webkit-transform: translate(-4px, -2px) rotate(-0.5deg); }
 508 |   32% { -webkit-transform: translate(2px, -2px) rotate(-1.5deg); }
 509 |   34% { -webkit-transform: translate(-3px, 6px) rotate(-3.5deg); }
 510 |   36% { -webkit-transform: translate(4px, 5px) rotate(-0.5deg); }
 511 |   38% { -webkit-transform: translate(-4px, -4px) rotate(-0.5deg); }
 512 |   40% { -webkit-transform: translate(-8px, 3px) rotate(-0.5deg); }
 513 |   42% { -webkit-transform: translate(-2px, -8px) rotate(0.5deg); }
 514 |   44% { -webkit-transform: translate(-2px, 8px) rotate(-3.5deg); }
 515 |   46% { -webkit-transform: translate(-1px, -6px) rotate(-2.5deg); }
 516 |   48% { -webkit-transform: translate(-8px, 7px) rotate(-2.5deg); }
 517 |   50% { -webkit-transform: translate(4px, -10px) rotate(1.5deg); }
 518 |   52% { -webkit-transform: translate(-9px, 8px) rotate(-1.5deg); }
 519 |   54% { -webkit-transform: translate(2px, -6px) rotate(-2.5deg); }
 520 |   56% { -webkit-transform: translate(-6px, -4px) rotate(-3.5deg); }
 521 |   58% { -webkit-transform: translate(8px, 8px) rotate(1.5deg); }
 522 |   60% { -webkit-transform: translate(-2px, -7px) rotate(-3.5deg); }
 523 |   62% { -webkit-transform: translate(-7px, -6px) rotate(0.5deg); }
 524 |   64% { -webkit-transform: translate(0px, 7px) rotate(1.5deg); }
 525 |   66% { -webkit-transform: translate(-3px, -3px) rotate(2.5deg); }
 526 |   68% { -webkit-transform: translate(4px, 1px) rotate(2.5deg); }
 527 |   70% { -webkit-transform: translate(2px, 3px) rotate(0.5deg); }
 528 |   72% { -webkit-transform: translate(4px, -10px) rotate(-0.5deg); }
 529 |   74% { -webkit-transform: translate(-1px, 7px) rotate(0.5deg); }
 530 |   76% { -webkit-transform: translate(-3px, 3px) rotate(-3.5deg); }
 531 |   78% { -webkit-transform: translate(-2px, 9px) rotate(-2.5deg); }
 532 |   80% { -webkit-transform: translate(7px, -5px) rotate(-3.5deg); }
 533 |   82% { -webkit-transform: translate(-8px, 8px) rotate(-0.5deg); }
 534 |   84% { -webkit-transform: translate(5px, 8px) rotate(-3.5deg); }
 535 |   86% { -webkit-transform: translate(4px, 0px) rotate(1.5deg); }
 536 |   88% { -webkit-transform: translate(-7px, 4px) rotate(2.5deg); }
 537 |   90% { -webkit-transform: translate(4px, 8px) rotate(0.5deg); }
 538 |   92% { -webkit-transform: translate(0px, -3px) rotate(-3.5deg); }
 539 |   94% { -webkit-transform: translate(7px, -3px) rotate(1.5deg); }
 540 |   96% { -webkit-transform: translate(-6px, -6px) rotate(0.5deg); }
 541 |   98% { -webkit-transform: translate(-4px, 7px) rotate(-2.5deg); } }
 542 | 
 543 | @-ms-keyframes shake-hard { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 544 |   2% { -ms-transform: translate(2px, 5px) rotate(2.5deg); }
 545 |   4% { -ms-transform: translate(-5px, 8px) rotate(2.5deg); }
 546 |   6% { -ms-transform: translate(-7px, 7px) rotate(0.5deg); }
 547 |   8% { -ms-transform: translate(2px, 3px) rotate(-1.5deg); }
 548 |   10% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
 549 |   12% { -ms-transform: translate(7px, 5px) rotate(-3.5deg); }
 550 |   14% { -ms-transform: translate(3px, 2px) rotate(1.5deg); }
 551 |   16% { -ms-transform: translate(-1px, -1px) rotate(-1.5deg); }
 552 |   18% { -ms-transform: translate(-3px, -7px) rotate(-3.5deg); }
 553 |   20% { -ms-transform: translate(5px, 0px) rotate(2.5deg); }
 554 |   22% { -ms-transform: translate(1px, -10px) rotate(-1.5deg); }
 555 |   24% { -ms-transform: translate(-6px, -3px) rotate(2.5deg); }
 556 |   26% { -ms-transform: translate(-4px, 5px) rotate(2.5deg); }
 557 |   28% { -ms-transform: translate(-6px, 0px) rotate(-3.5deg); }
 558 |   30% { -ms-transform: translate(-1px, 6px) rotate(-2.5deg); }
 559 |   32% { -ms-transform: translate(8px, 2px) rotate(-2.5deg); }
 560 |   34% { -ms-transform: translate(-4px, -2px) rotate(2.5deg); }
 561 |   36% { -ms-transform: translate(8px, 8px) rotate(-0.5deg); }
 562 |   38% { -ms-transform: translate(-8px, -6px) rotate(-3.5deg); }
 563 |   40% { -ms-transform: translate(3px, -2px) rotate(-0.5deg); }
 564 |   42% { -ms-transform: translate(1px, 5px) rotate(-1.5deg); }
 565 |   44% { -ms-transform: translate(6px, 2px) rotate(0.5deg); }
 566 |   46% { -ms-transform: translate(-6px, -1px) rotate(-0.5deg); }
 567 |   48% { -ms-transform: translate(-5px, 5px) rotate(-1.5deg); }
 568 |   50% { -ms-transform: translate(6px, 6px) rotate(-2.5deg); }
 569 |   52% { -ms-transform: translate(-1px, 9px) rotate(0.5deg); }
 570 |   54% { -ms-transform: translate(-3px, 7px) rotate(2.5deg); }
 571 |   56% { -ms-transform: translate(7px, 5px) rotate(0.5deg); }
 572 |   58% { -ms-transform: translate(-8px, -4px) rotate(-0.5deg); }
 573 |   60% { -ms-transform: translate(-6px, -5px) rotate(0.5deg); }
 574 |   62% { -ms-transform: translate(8px, -8px) rotate(-2.5deg); }
 575 |   64% { -ms-transform: translate(-2px, -5px) rotate(-2.5deg); }
 576 |   66% { -ms-transform: translate(-5px, -7px) rotate(2.5deg); }
 577 |   68% { -ms-transform: translate(3px, -3px) rotate(-2.5deg); }
 578 |   70% { -ms-transform: translate(3px, 8px) rotate(-2.5deg); }
 579 |   72% { -ms-transform: translate(-3px, -3px) rotate(-3.5deg); }
 580 |   74% { -ms-transform: translate(-8px, -4px) rotate(-2.5deg); }
 581 |   76% { -ms-transform: translate(-8px, -5px) rotate(-1.5deg); }
 582 |   78% { -ms-transform: translate(6px, -10px) rotate(0.5deg); }
 583 |   80% { -ms-transform: translate(-9px, -3px) rotate(-3.5deg); }
 584 |   82% { -ms-transform: translate(6px, 5px) rotate(-3.5deg); }
 585 |   84% { -ms-transform: translate(-4px, 5px) rotate(-0.5deg); }
 586 |   86% { -ms-transform: translate(-3px, -3px) rotate(0.5deg); }
 587 |   88% { -ms-transform: translate(3px, -7px) rotate(-2.5deg); }
 588 |   90% { -ms-transform: translate(-1px, 2px) rotate(-1.5deg); }
 589 |   92% { -ms-transform: translate(2px, 5px) rotate(2.5deg); }
 590 |   94% { -ms-transform: translate(-2px, 1px) rotate(-2.5deg); }
 591 |   96% { -ms-transform: translate(-5px, -2px) rotate(-0.5deg); }
 592 |   98% { -ms-transform: translate(-6px, 8px) rotate(-2.5deg); } }
 593 | 
 594 | @keyframes shake-hard { 0% { transform: translate(0px, 0px) rotate(0deg); }
 595 |   2% { transform: translate(-8px, -1px) rotate(0.5deg); }
 596 |   4% { transform: translate(-3px, 3px) rotate(-2.5deg); }
 597 |   6% { transform: translate(-4px, -2px) rotate(-2.5deg); }
 598 |   8% { transform: translate(-8px, -5px) rotate(-3.5deg); }
 599 |   10% { transform: translate(-2px, -10px) rotate(0.5deg); }
 600 |   12% { transform: translate(0px, -9px) rotate(-1.5deg); }
 601 |   14% { transform: translate(-8px, 7px) rotate(-0.5deg); }
 602 |   16% { transform: translate(-2px, 8px) rotate(-1.5deg); }
 603 |   18% { transform: translate(1px, 9px) rotate(1.5deg); }
 604 |   20% { transform: translate(5px, 7px) rotate(-2.5deg); }
 605 |   22% { transform: translate(0px, 2px) rotate(-2.5deg); }
 606 |   24% { transform: translate(0px, 7px) rotate(-1.5deg); }
 607 |   26% { transform: translate(-9px, 4px) rotate(-3.5deg); }
 608 |   28% { transform: translate(3px, -1px) rotate(1.5deg); }
 609 |   30% { transform: translate(6px, 2px) rotate(1.5deg); }
 610 |   32% { transform: translate(-8px, -8px) rotate(-3.5deg); }
 611 |   34% { transform: translate(9px, 5px) rotate(-1.5deg); }
 612 |   36% { transform: translate(-2px, 7px) rotate(-0.5deg); }
 613 |   38% { transform: translate(0px, 0px) rotate(2.5deg); }
 614 |   40% { transform: translate(0px, -10px) rotate(-3.5deg); }
 615 |   42% { transform: translate(3px, -4px) rotate(0.5deg); }
 616 |   44% { transform: translate(-1px, -10px) rotate(0.5deg); }
 617 |   46% { transform: translate(0px, 1px) rotate(2.5deg); }
 618 |   48% { transform: translate(-1px, 1px) rotate(2.5deg); }
 619 |   50% { transform: translate(7px, 4px) rotate(-0.5deg); }
 620 |   52% { transform: translate(-10px, -5px) rotate(1.5deg); }
 621 |   54% { transform: translate(-1px, 6px) rotate(-1.5deg); }
 622 |   56% { transform: translate(-9px, 9px) rotate(-3.5deg); }
 623 |   58% { transform: translate(8px, 2px) rotate(2.5deg); }
 624 |   60% { transform: translate(9px, 1px) rotate(-1.5deg); }
 625 |   62% { transform: translate(-3px, -2px) rotate(-2.5deg); }
 626 |   64% { transform: translate(-3px, 8px) rotate(0.5deg); }
 627 |   66% { transform: translate(-8px, 8px) rotate(0.5deg); }
 628 |   68% { transform: translate(0px, 9px) rotate(2.5deg); }
 629 |   70% { transform: translate(3px, -9px) rotate(2.5deg); }
 630 |   72% { transform: translate(3px, -5px) rotate(-3.5deg); }
 631 |   74% { transform: translate(-10px, 2px) rotate(-1.5deg); }
 632 |   76% { transform: translate(2px, 2px) rotate(1.5deg); }
 633 |   78% { transform: translate(2px, -3px) rotate(0.5deg); }
 634 |   80% { transform: translate(-4px, -7px) rotate(-1.5deg); }
 635 |   82% { transform: translate(-9px, 0px) rotate(-0.5deg); }
 636 |   84% { transform: translate(-5px, 5px) rotate(-3.5deg); }
 637 |   86% { transform: translate(-8px, -3px) rotate(2.5deg); }
 638 |   88% { transform: translate(2px, -5px) rotate(-1.5deg); }
 639 |   90% { transform: translate(-5px, 0px) rotate(-2.5deg); }
 640 |   92% { transform: translate(1px, -5px) rotate(1.5deg); }
 641 |   94% { transform: translate(-8px, -8px) rotate(0.5deg); }
 642 |   96% { transform: translate(-6px, -8px) rotate(2.5deg); }
 643 |   98% { transform: translate(1px, 0px) rotate(1.5deg); } }
 644 | 
 645 | @-webkit-keyframes shake-horizontal { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 646 |   2% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
 647 |   4% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
 648 |   6% { -webkit-transform: translate(3px, 0px) rotate(0deg); }
 649 |   8% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
 650 |   10% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
 651 |   12% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
 652 |   14% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
 653 |   16% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
 654 |   18% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
 655 |   20% { -webkit-transform: translate(-4px, 0px) rotate(0deg); }
 656 |   22% { -webkit-transform: translate(5px, 0px) rotate(0deg); }
 657 |   24% { -webkit-transform: translate(-1px, 0px) rotate(0deg); }
 658 |   26% { -webkit-transform: translate(7px, 0px) rotate(0deg); }
 659 |   28% { -webkit-transform: translate(-5px, 0px) rotate(0deg); }
 660 |   30% { -webkit-transform: translate(8px, 0px) rotate(0deg); }
 661 |   32% { -webkit-transform: translate(-8px, 0px) rotate(0deg); }
 662 |   34% { -webkit-transform: translate(-2px, 0px) rotate(0deg); }
 663 |   36% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
 664 |   38% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
 665 |   40% { -webkit-transform: translate(-10px, 0px) rotate(0deg); }
 666 |   42% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
 667 |   44% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 668 |   46% { -webkit-transform: translate(3px, 0px) rotate(0deg); }
 669 |   48% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
 670 |   50% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
 671 |   52% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 672 |   54% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
 673 |   56% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
 674 |   58% { -webkit-transform: translate(-9px, 0px) rotate(0deg); }
 675 |   60% { -webkit-transform: translate(-4px, 0px) rotate(0deg); }
 676 |   62% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
 677 |   64% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
 678 |   66% { -webkit-transform: translate(-2px, 0px) rotate(0deg); }
 679 |   68% { -webkit-transform: translate(6px, 0px) rotate(0deg); }
 680 |   70% { -webkit-transform: translate(-8px, 0px) rotate(0deg); }
 681 |   72% { -webkit-transform: translate(9px, 0px) rotate(0deg); }
 682 |   74% { -webkit-transform: translate(-6px, 0px) rotate(0deg); }
 683 |   76% { -webkit-transform: translate(-10px, 0px) rotate(0deg); }
 684 |   78% { -webkit-transform: translate(-7px, 0px) rotate(0deg); }
 685 |   80% { -webkit-transform: translate(1px, 0px) rotate(0deg); }
 686 |   82% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 687 |   84% { -webkit-transform: translate(-2px, 0px) rotate(0deg); }
 688 |   86% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
 689 |   88% { -webkit-transform: translate(-5px, 0px) rotate(0deg); }
 690 |   90% { -webkit-transform: translate(-9px, 0px) rotate(0deg); }
 691 |   92% { -webkit-transform: translate(7px, 0px) rotate(0deg); }
 692 |   94% { -webkit-transform: translate(8px, 0px) rotate(0deg); }
 693 |   96% { -webkit-transform: translate(-8px, 0px) rotate(0deg); }
 694 |   98% { -webkit-transform: translate(4px, 0px) rotate(0deg); } }
 695 | 
 696 | @-ms-keyframes shake-horizontal { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 697 |   2% { -ms-transform: translate(-9px, 0px) rotate(0deg); }
 698 |   4% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
 699 |   6% { -ms-transform: translate(-2px, 0px) rotate(0deg); }
 700 |   8% { -ms-transform: translate(5px, 0px) rotate(0deg); }
 701 |   10% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
 702 |   12% { -ms-transform: translate(9px, 0px) rotate(0deg); }
 703 |   14% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
 704 |   16% { -ms-transform: translate(-4px, 0px) rotate(0deg); }
 705 |   18% { -ms-transform: translate(7px, 0px) rotate(0deg); }
 706 |   20% { -ms-transform: translate(8px, 0px) rotate(0deg); }
 707 |   22% { -ms-transform: translate(7px, 0px) rotate(0deg); }
 708 |   24% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
 709 |   26% { -ms-transform: translate(-2px, 0px) rotate(0deg); }
 710 |   28% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
 711 |   30% { -ms-transform: translate(3px, 0px) rotate(0deg); }
 712 |   32% { -ms-transform: translate(-7px, 0px) rotate(0deg); }
 713 |   34% { -ms-transform: translate(7px, 0px) rotate(0deg); }
 714 |   36% { -ms-transform: translate(4px, 0px) rotate(0deg); }
 715 |   38% { -ms-transform: translate(-10px, 0px) rotate(0deg); }
 716 |   40% { -ms-transform: translate(3px, 0px) rotate(0deg); }
 717 |   42% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
 718 |   44% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
 719 |   46% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 720 |   48% { -ms-transform: translate(-8px, 0px) rotate(0deg); }
 721 |   50% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 722 |   52% { -ms-transform: translate(-5px, 0px) rotate(0deg); }
 723 |   54% { -ms-transform: translate(4px, 0px) rotate(0deg); }
 724 |   56% { -ms-transform: translate(-2px, 0px) rotate(0deg); }
 725 |   58% { -ms-transform: translate(-9px, 0px) rotate(0deg); }
 726 |   60% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
 727 |   62% { -ms-transform: translate(4px, 0px) rotate(0deg); }
 728 |   64% { -ms-transform: translate(-10px, 0px) rotate(0deg); }
 729 |   66% { -ms-transform: translate(8px, 0px) rotate(0deg); }
 730 |   68% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 731 |   70% { -ms-transform: translate(4px, 0px) rotate(0deg); }
 732 |   72% { -ms-transform: translate(-4px, 0px) rotate(0deg); }
 733 |   74% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
 734 |   76% { -ms-transform: translate(-3px, 0px) rotate(0deg); }
 735 |   78% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 736 |   80% { -ms-transform: translate(-10px, 0px) rotate(0deg); }
 737 |   82% { -ms-transform: translate(4px, 0px) rotate(0deg); }
 738 |   84% { -ms-transform: translate(-7px, 0px) rotate(0deg); }
 739 |   86% { -ms-transform: translate(7px, 0px) rotate(0deg); }
 740 |   88% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
 741 |   90% { -ms-transform: translate(9px, 0px) rotate(0deg); }
 742 |   92% { -ms-transform: translate(-6px, 0px) rotate(0deg); }
 743 |   94% { -ms-transform: translate(-8px, 0px) rotate(0deg); }
 744 |   96% { -ms-transform: translate(-1px, 0px) rotate(0deg); }
 745 |   98% { -ms-transform: translate(-5px, 0px) rotate(0deg); } }
 746 | 
 747 | @keyframes shake-horizontal { 0% { transform: translate(0px, 0px) rotate(0deg); }
 748 |   2% { transform: translate(-4px, 0px) rotate(0deg); }
 749 |   4% { transform: translate(2px, 0px) rotate(0deg); }
 750 |   6% { transform: translate(-3px, 0px) rotate(0deg); }
 751 |   8% { transform: translate(9px, 0px) rotate(0deg); }
 752 |   10% { transform: translate(2px, 0px) rotate(0deg); }
 753 |   12% { transform: translate(-6px, 0px) rotate(0deg); }
 754 |   14% { transform: translate(-7px, 0px) rotate(0deg); }
 755 |   16% { transform: translate(2px, 0px) rotate(0deg); }
 756 |   18% { transform: translate(7px, 0px) rotate(0deg); }
 757 |   20% { transform: translate(-1px, 0px) rotate(0deg); }
 758 |   22% { transform: translate(-10px, 0px) rotate(0deg); }
 759 |   24% { transform: translate(-10px, 0px) rotate(0deg); }
 760 |   26% { transform: translate(3px, 0px) rotate(0deg); }
 761 |   28% { transform: translate(-5px, 0px) rotate(0deg); }
 762 |   30% { transform: translate(4px, 0px) rotate(0deg); }
 763 |   32% { transform: translate(-6px, 0px) rotate(0deg); }
 764 |   34% { transform: translate(-2px, 0px) rotate(0deg); }
 765 |   36% { transform: translate(-6px, 0px) rotate(0deg); }
 766 |   38% { transform: translate(-2px, 0px) rotate(0deg); }
 767 |   40% { transform: translate(4px, 0px) rotate(0deg); }
 768 |   42% { transform: translate(8px, 0px) rotate(0deg); }
 769 |   44% { transform: translate(-3px, 0px) rotate(0deg); }
 770 |   46% { transform: translate(-10px, 0px) rotate(0deg); }
 771 |   48% { transform: translate(4px, 0px) rotate(0deg); }
 772 |   50% { transform: translate(-6px, 0px) rotate(0deg); }
 773 |   52% { transform: translate(6px, 0px) rotate(0deg); }
 774 |   54% { transform: translate(-8px, 0px) rotate(0deg); }
 775 |   56% { transform: translate(5px, 0px) rotate(0deg); }
 776 |   58% { transform: translate(9px, 0px) rotate(0deg); }
 777 |   60% { transform: translate(7px, 0px) rotate(0deg); }
 778 |   62% { transform: translate(1px, 0px) rotate(0deg); }
 779 |   64% { transform: translate(2px, 0px) rotate(0deg); }
 780 |   66% { transform: translate(-2px, 0px) rotate(0deg); }
 781 |   68% { transform: translate(-7px, 0px) rotate(0deg); }
 782 |   70% { transform: translate(-1px, 0px) rotate(0deg); }
 783 |   72% { transform: translate(-6px, 0px) rotate(0deg); }
 784 |   74% { transform: translate(5px, 0px) rotate(0deg); }
 785 |   76% { transform: translate(0px, 0px) rotate(0deg); }
 786 |   78% { transform: translate(9px, 0px) rotate(0deg); }
 787 |   80% { transform: translate(-3px, 0px) rotate(0deg); }
 788 |   82% { transform: translate(8px, 0px) rotate(0deg); }
 789 |   84% { transform: translate(-2px, 0px) rotate(0deg); }
 790 |   86% { transform: translate(-1px, 0px) rotate(0deg); }
 791 |   88% { transform: translate(-3px, 0px) rotate(0deg); }
 792 |   90% { transform: translate(4px, 0px) rotate(0deg); }
 793 |   92% { transform: translate(0px, 0px) rotate(0deg); }
 794 |   94% { transform: translate(4px, 0px) rotate(0deg); }
 795 |   96% { transform: translate(2px, 0px) rotate(0deg); }
 796 |   98% { transform: translate(-2px, 0px) rotate(0deg); } }
 797 | 
 798 | @-webkit-keyframes shake-vertical { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 799 |   2% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 800 |   4% { -webkit-transform: translate(0px, 6px) rotate(0deg); }
 801 |   6% { -webkit-transform: translate(0px, -5px) rotate(0deg); }
 802 |   8% { -webkit-transform: translate(0px, -3px) rotate(0deg); }
 803 |   10% { -webkit-transform: translate(0px, 9px) rotate(0deg); }
 804 |   12% { -webkit-transform: translate(0px, 5px) rotate(0deg); }
 805 |   14% { -webkit-transform: translate(0px, -7px) rotate(0deg); }
 806 |   16% { -webkit-transform: translate(0px, -2px) rotate(0deg); }
 807 |   18% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
 808 |   20% { -webkit-transform: translate(0px, 8px) rotate(0deg); }
 809 |   22% { -webkit-transform: translate(0px, 7px) rotate(0deg); }
 810 |   24% { -webkit-transform: translate(0px, -1px) rotate(0deg); }
 811 |   26% { -webkit-transform: translate(0px, -4px) rotate(0deg); }
 812 |   28% { -webkit-transform: translate(0px, 5px) rotate(0deg); }
 813 |   30% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
 814 |   32% { -webkit-transform: translate(0px, -2px) rotate(0deg); }
 815 |   34% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 816 |   36% { -webkit-transform: translate(0px, 7px) rotate(0deg); }
 817 |   38% { -webkit-transform: translate(0px, 5px) rotate(0deg); }
 818 |   40% { -webkit-transform: translate(0px, 5px) rotate(0deg); }
 819 |   42% { -webkit-transform: translate(0px, 7px) rotate(0deg); }
 820 |   44% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 821 |   46% { -webkit-transform: translate(0px, -9px) rotate(0deg); }
 822 |   48% { -webkit-transform: translate(0px, -9px) rotate(0deg); }
 823 |   50% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 824 |   52% { -webkit-transform: translate(0px, -10px) rotate(0deg); }
 825 |   54% { -webkit-transform: translate(0px, -9px) rotate(0deg); }
 826 |   56% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 827 |   58% { -webkit-transform: translate(0px, -4px) rotate(0deg); }
 828 |   60% { -webkit-transform: translate(0px, -6px) rotate(0deg); }
 829 |   62% { -webkit-transform: translate(0px, 8px) rotate(0deg); }
 830 |   64% { -webkit-transform: translate(0px, 9px) rotate(0deg); }
 831 |   66% { -webkit-transform: translate(0px, 6px) rotate(0deg); }
 832 |   68% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 833 |   70% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
 834 |   72% { -webkit-transform: translate(0px, 4px) rotate(0deg); }
 835 |   74% { -webkit-transform: translate(0px, -9px) rotate(0deg); }
 836 |   76% { -webkit-transform: translate(0px, -5px) rotate(0deg); }
 837 |   78% { -webkit-transform: translate(0px, -7px) rotate(0deg); }
 838 |   80% { -webkit-transform: translate(0px, -3px) rotate(0deg); }
 839 |   82% { -webkit-transform: translate(0px, -2px) rotate(0deg); }
 840 |   84% { -webkit-transform: translate(0px, 8px) rotate(0deg); }
 841 |   86% { -webkit-transform: translate(0px, -7px) rotate(0deg); }
 842 |   88% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
 843 |   90% { -webkit-transform: translate(0px, -7px) rotate(0deg); }
 844 |   92% { -webkit-transform: translate(0px, -5px) rotate(0deg); }
 845 |   94% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
 846 |   96% { -webkit-transform: translate(0px, -8px) rotate(0deg); }
 847 |   98% { -webkit-transform: translate(0px, 7px) rotate(0deg); } }
 848 | 
 849 | @-ms-keyframes shake-vertical { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 850 |   2% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 851 |   4% { -ms-transform: translate(0px, 9px) rotate(0deg); }
 852 |   6% { -ms-transform: translate(0px, 3px) rotate(0deg); }
 853 |   8% { -ms-transform: translate(0px, -8px) rotate(0deg); }
 854 |   10% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 855 |   12% { -ms-transform: translate(0px, -10px) rotate(0deg); }
 856 |   14% { -ms-transform: translate(0px, 4px) rotate(0deg); }
 857 |   16% { -ms-transform: translate(0px, 5px) rotate(0deg); }
 858 |   18% { -ms-transform: translate(0px, 4px) rotate(0deg); }
 859 |   20% { -ms-transform: translate(0px, -3px) rotate(0deg); }
 860 |   22% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 861 |   24% { -ms-transform: translate(0px, -1px) rotate(0deg); }
 862 |   26% { -ms-transform: translate(0px, -6px) rotate(0deg); }
 863 |   28% { -ms-transform: translate(0px, -7px) rotate(0deg); }
 864 |   30% { -ms-transform: translate(0px, -6px) rotate(0deg); }
 865 |   32% { -ms-transform: translate(0px, 1px) rotate(0deg); }
 866 |   34% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 867 |   36% { -ms-transform: translate(0px, 8px) rotate(0deg); }
 868 |   38% { -ms-transform: translate(0px, -9px) rotate(0deg); }
 869 |   40% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 870 |   42% { -ms-transform: translate(0px, -9px) rotate(0deg); }
 871 |   44% { -ms-transform: translate(0px, -7px) rotate(0deg); }
 872 |   46% { -ms-transform: translate(0px, 1px) rotate(0deg); }
 873 |   48% { -ms-transform: translate(0px, -4px) rotate(0deg); }
 874 |   50% { -ms-transform: translate(0px, -9px) rotate(0deg); }
 875 |   52% { -ms-transform: translate(0px, 1px) rotate(0deg); }
 876 |   54% { -ms-transform: translate(0px, 3px) rotate(0deg); }
 877 |   56% { -ms-transform: translate(0px, 4px) rotate(0deg); }
 878 |   58% { -ms-transform: translate(0px, -7px) rotate(0deg); }
 879 |   60% { -ms-transform: translate(0px, -5px) rotate(0deg); }
 880 |   62% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 881 |   64% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 882 |   66% { -ms-transform: translate(0px, 6px) rotate(0deg); }
 883 |   68% { -ms-transform: translate(0px, 6px) rotate(0deg); }
 884 |   70% { -ms-transform: translate(0px, -5px) rotate(0deg); }
 885 |   72% { -ms-transform: translate(0px, 3px) rotate(0deg); }
 886 |   74% { -ms-transform: translate(0px, -10px) rotate(0deg); }
 887 |   76% { -ms-transform: translate(0px, 0px) rotate(0deg); }
 888 |   78% { -ms-transform: translate(0px, -6px) rotate(0deg); }
 889 |   80% { -ms-transform: translate(0px, 7px) rotate(0deg); }
 890 |   82% { -ms-transform: translate(0px, -8px) rotate(0deg); }
 891 |   84% { -ms-transform: translate(0px, 8px) rotate(0deg); }
 892 |   86% { -ms-transform: translate(0px, 1px) rotate(0deg); }
 893 |   88% { -ms-transform: translate(0px, 1px) rotate(0deg); }
 894 |   90% { -ms-transform: translate(0px, 6px) rotate(0deg); }
 895 |   92% { -ms-transform: translate(0px, -4px) rotate(0deg); }
 896 |   94% { -ms-transform: translate(0px, 6px) rotate(0deg); }
 897 |   96% { -ms-transform: translate(0px, -6px) rotate(0deg); }
 898 |   98% { -ms-transform: translate(0px, -4px) rotate(0deg); } }
 899 | 
 900 | @keyframes shake-vertical { 0% { transform: translate(0px, 0px) rotate(0deg); }
 901 |   2% { transform: translate(0px, -9px) rotate(0deg); }
 902 |   4% { transform: translate(0px, 6px) rotate(0deg); }
 903 |   6% { transform: translate(0px, 6px) rotate(0deg); }
 904 |   8% { transform: translate(0px, 1px) rotate(0deg); }
 905 |   10% { transform: translate(0px, -4px) rotate(0deg); }
 906 |   12% { transform: translate(0px, 1px) rotate(0deg); }
 907 |   14% { transform: translate(0px, -7px) rotate(0deg); }
 908 |   16% { transform: translate(0px, -8px) rotate(0deg); }
 909 |   18% { transform: translate(0px, 3px) rotate(0deg); }
 910 |   20% { transform: translate(0px, 1px) rotate(0deg); }
 911 |   22% { transform: translate(0px, 2px) rotate(0deg); }
 912 |   24% { transform: translate(0px, 7px) rotate(0deg); }
 913 |   26% { transform: translate(0px, -4px) rotate(0deg); }
 914 |   28% { transform: translate(0px, 1px) rotate(0deg); }
 915 |   30% { transform: translate(0px, -10px) rotate(0deg); }
 916 |   32% { transform: translate(0px, -2px) rotate(0deg); }
 917 |   34% { transform: translate(0px, 8px) rotate(0deg); }
 918 |   36% { transform: translate(0px, 9px) rotate(0deg); }
 919 |   38% { transform: translate(0px, -2px) rotate(0deg); }
 920 |   40% { transform: translate(0px, 0px) rotate(0deg); }
 921 |   42% { transform: translate(0px, -4px) rotate(0deg); }
 922 |   44% { transform: translate(0px, -1px) rotate(0deg); }
 923 |   46% { transform: translate(0px, -2px) rotate(0deg); }
 924 |   48% { transform: translate(0px, 4px) rotate(0deg); }
 925 |   50% { transform: translate(0px, 7px) rotate(0deg); }
 926 |   52% { transform: translate(0px, -8px) rotate(0deg); }
 927 |   54% { transform: translate(0px, -3px) rotate(0deg); }
 928 |   56% { transform: translate(0px, -6px) rotate(0deg); }
 929 |   58% { transform: translate(0px, 6px) rotate(0deg); }
 930 |   60% { transform: translate(0px, -2px) rotate(0deg); }
 931 |   62% { transform: translate(0px, 8px) rotate(0deg); }
 932 |   64% { transform: translate(0px, 1px) rotate(0deg); }
 933 |   66% { transform: translate(0px, -8px) rotate(0deg); }
 934 |   68% { transform: translate(0px, -9px) rotate(0deg); }
 935 |   70% { transform: translate(0px, 5px) rotate(0deg); }
 936 |   72% { transform: translate(0px, 5px) rotate(0deg); }
 937 |   74% { transform: translate(0px, 9px) rotate(0deg); }
 938 |   76% { transform: translate(0px, 6px) rotate(0deg); }
 939 |   78% { transform: translate(0px, 0px) rotate(0deg); }
 940 |   80% { transform: translate(0px, -2px) rotate(0deg); }
 941 |   82% { transform: translate(0px, -4px) rotate(0deg); }
 942 |   84% { transform: translate(0px, -4px) rotate(0deg); }
 943 |   86% { transform: translate(0px, 8px) rotate(0deg); }
 944 |   88% { transform: translate(0px, 9px) rotate(0deg); }
 945 |   90% { transform: translate(0px, 8px) rotate(0deg); }
 946 |   92% { transform: translate(0px, 8px) rotate(0deg); }
 947 |   94% { transform: translate(0px, -5px) rotate(0deg); }
 948 |   96% { transform: translate(0px, 1px) rotate(0deg); }
 949 |   98% { transform: translate(0px, 5px) rotate(0deg); } }
 950 | 
 951 | @-webkit-keyframes shake-rotate { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 952 |   2% { -webkit-transform: translate(0px, 0px) rotate(4.5deg); }
 953 |   4% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
 954 |   6% { -webkit-transform: translate(0px, 0px) rotate(3.5deg); }
 955 |   8% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
 956 |   10% { -webkit-transform: translate(0px, 0px) rotate(2.5deg); }
 957 |   12% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 958 |   14% { -webkit-transform: translate(0px, 0px) rotate(-3.5deg); }
 959 |   16% { -webkit-transform: translate(0px, 0px) rotate(4.5deg); }
 960 |   18% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
 961 |   20% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
 962 |   22% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
 963 |   24% { -webkit-transform: translate(0px, 0px) rotate(4.5deg); }
 964 |   26% { -webkit-transform: translate(0px, 0px) rotate(-4.5deg); }
 965 |   28% { -webkit-transform: translate(0px, 0px) rotate(2.5deg); }
 966 |   30% { -webkit-transform: translate(0px, 0px) rotate(-7.5deg); }
 967 |   32% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
 968 |   34% { -webkit-transform: translate(0px, 0px) rotate(-3.5deg); }
 969 |   36% { -webkit-transform: translate(0px, 0px) rotate(5.5deg); }
 970 |   38% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
 971 |   40% { -webkit-transform: translate(0px, 0px) rotate(-4.5deg); }
 972 |   42% { -webkit-transform: translate(0px, 0px) rotate(6.5deg); }
 973 |   44% { -webkit-transform: translate(0px, 0px) rotate(0.5deg); }
 974 |   46% { -webkit-transform: translate(0px, 0px) rotate(4.5deg); }
 975 |   48% { -webkit-transform: translate(0px, 0px) rotate(-6.5deg); }
 976 |   50% { -webkit-transform: translate(0px, 0px) rotate(3.5deg); }
 977 |   52% { -webkit-transform: translate(0px, 0px) rotate(-7.5deg); }
 978 |   54% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 979 |   56% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg); }
 980 |   58% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
 981 |   60% { -webkit-transform: translate(0px, 0px) rotate(3.5deg); }
 982 |   62% { -webkit-transform: translate(0px, 0px) rotate(1.5deg); }
 983 |   64% { -webkit-transform: translate(0px, 0px) rotate(-3.5deg); }
 984 |   66% { -webkit-transform: translate(0px, 0px) rotate(0.5deg); }
 985 |   68% { -webkit-transform: translate(0px, 0px) rotate(-4.5deg); }
 986 |   70% { -webkit-transform: translate(0px, 0px) rotate(5.5deg); }
 987 |   72% { -webkit-transform: translate(0px, 0px) rotate(-3.5deg); }
 988 |   74% { -webkit-transform: translate(0px, 0px) rotate(-4.5deg); }
 989 |   76% { -webkit-transform: translate(0px, 0px) rotate(6.5deg); }
 990 |   78% { -webkit-transform: translate(0px, 0px) rotate(0.5deg); }
 991 |   80% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
 992 |   82% { -webkit-transform: translate(0px, 0px) rotate(-7.5deg); }
 993 |   84% { -webkit-transform: translate(0px, 0px) rotate(-7.5deg); }
 994 |   86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
 995 |   88% { -webkit-transform: translate(0px, 0px) rotate(-4.5deg); }
 996 |   90% { -webkit-transform: translate(0px, 0px) rotate(6.5deg); }
 997 |   92% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
 998 |   94% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
 999 |   96% { -webkit-transform: translate(0px, 0px) rotate(4.5deg); }
1000 |   98% { -webkit-transform: translate(0px, 0px) rotate(-3.5deg); } }
1001 | 
1002 | @-ms-keyframes shake-rotate { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
1003 |   2% { -ms-transform: translate(0px, 0px) rotate(-3.5deg); }
1004 |   4% { -ms-transform: translate(0px, 0px) rotate(1.5deg); }
1005 |   6% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); }
1006 |   8% { -ms-transform: translate(0px, 0px) rotate(-7.5deg); }
1007 |   10% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); }
1008 |   12% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); }
1009 |   14% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
1010 |   16% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
1011 |   18% { -ms-transform: translate(0px, 0px) rotate(1.5deg); }
1012 |   20% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1013 |   22% { -ms-transform: translate(0px, 0px) rotate(-3.5deg); }
1014 |   24% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1015 |   26% { -ms-transform: translate(0px, 0px) rotate(-4.5deg); }
1016 |   28% { -ms-transform: translate(0px, 0px) rotate(-4.5deg); }
1017 |   30% { -ms-transform: translate(0px, 0px) rotate(-2.5deg); }
1018 |   32% { -ms-transform: translate(0px, 0px) rotate(-5.5deg); }
1019 |   34% { -ms-transform: translate(0px, 0px) rotate(-4.5deg); }
1020 |   36% { -ms-transform: translate(0px, 0px) rotate(4.5deg); }
1021 |   38% { -ms-transform: translate(0px, 0px) rotate(0.5deg); }
1022 |   40% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1023 |   42% { -ms-transform: translate(0px, 0px) rotate(2.5deg); }
1024 |   44% { -ms-transform: translate(0px, 0px) rotate(-2.5deg); }
1025 |   46% { -ms-transform: translate(0px, 0px) rotate(0.5deg); }
1026 |   48% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1027 |   50% { -ms-transform: translate(0px, 0px) rotate(0.5deg); }
1028 |   52% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1029 |   54% { -ms-transform: translate(0px, 0px) rotate(2.5deg); }
1030 |   56% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); }
1031 |   58% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); }
1032 |   60% { -ms-transform: translate(0px, 0px) rotate(3.5deg); }
1033 |   62% { -ms-transform: translate(0px, 0px) rotate(-4.5deg); }
1034 |   64% { -ms-transform: translate(0px, 0px) rotate(2.5deg); }
1035 |   66% { -ms-transform: translate(0px, 0px) rotate(-4.5deg); }
1036 |   68% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1037 |   70% { -ms-transform: translate(0px, 0px) rotate(-3.5deg); }
1038 |   72% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1039 |   74% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1040 |   76% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1041 |   78% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1042 |   80% { -ms-transform: translate(0px, 0px) rotate(-5.5deg); }
1043 |   82% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); }
1044 |   84% { -ms-transform: translate(0px, 0px) rotate(-4.5deg); }
1045 |   86% { -ms-transform: translate(0px, 0px) rotate(5.5deg); }
1046 |   88% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1047 |   90% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1048 |   92% { -ms-transform: translate(0px, 0px) rotate(-6.5deg); }
1049 |   94% { -ms-transform: translate(0px, 0px) rotate(6.5deg); }
1050 |   96% { -ms-transform: translate(0px, 0px) rotate(-5.5deg); }
1051 |   98% { -ms-transform: translate(0px, 0px) rotate(-1.5deg); } }
1052 | 
1053 | @keyframes shake-rotate { 0% { transform: translate(0px, 0px) rotate(0deg); }
1054 |   2% { transform: translate(0px, 0px) rotate(1.5deg); }
1055 |   4% { transform: translate(0px, 0px) rotate(-7.5deg); }
1056 |   6% { transform: translate(0px, 0px) rotate(-2.5deg); }
1057 |   8% { transform: translate(0px, 0px) rotate(6.5deg); }
1058 |   10% { transform: translate(0px, 0px) rotate(-4.5deg); }
1059 |   12% { transform: translate(0px, 0px) rotate(0.5deg); }
1060 |   14% { transform: translate(0px, 0px) rotate(-6.5deg); }
1061 |   16% { transform: translate(0px, 0px) rotate(1.5deg); }
1062 |   18% { transform: translate(0px, 0px) rotate(-2.5deg); }
1063 |   20% { transform: translate(0px, 0px) rotate(1.5deg); }
1064 |   22% { transform: translate(0px, 0px) rotate(1.5deg); }
1065 |   24% { transform: translate(0px, 0px) rotate(2.5deg); }
1066 |   26% { transform: translate(0px, 0px) rotate(6.5deg); }
1067 |   28% { transform: translate(0px, 0px) rotate(2.5deg); }
1068 |   30% { transform: translate(0px, 0px) rotate(1.5deg); }
1069 |   32% { transform: translate(0px, 0px) rotate(-4.5deg); }
1070 |   34% { transform: translate(0px, 0px) rotate(-3.5deg); }
1071 |   36% { transform: translate(0px, 0px) rotate(-0.5deg); }
1072 |   38% { transform: translate(0px, 0px) rotate(4.5deg); }
1073 |   40% { transform: translate(0px, 0px) rotate(4.5deg); }
1074 |   42% { transform: translate(0px, 0px) rotate(-0.5deg); }
1075 |   44% { transform: translate(0px, 0px) rotate(1.5deg); }
1076 |   46% { transform: translate(0px, 0px) rotate(-0.5deg); }
1077 |   48% { transform: translate(0px, 0px) rotate(-7.5deg); }
1078 |   50% { transform: translate(0px, 0px) rotate(3.5deg); }
1079 |   52% { transform: translate(0px, 0px) rotate(-5.5deg); }
1080 |   54% { transform: translate(0px, 0px) rotate(-6.5deg); }
1081 |   56% { transform: translate(0px, 0px) rotate(-0.5deg); }
1082 |   58% { transform: translate(0px, 0px) rotate(3.5deg); }
1083 |   60% { transform: translate(0px, 0px) rotate(-2.5deg); }
1084 |   62% { transform: translate(0px, 0px) rotate(3.5deg); }
1085 |   64% { transform: translate(0px, 0px) rotate(6.5deg); }
1086 |   66% { transform: translate(0px, 0px) rotate(-6.5deg); }
1087 |   68% { transform: translate(0px, 0px) rotate(-2.5deg); }
1088 |   70% { transform: translate(0px, 0px) rotate(-3.5deg); }
1089 |   72% { transform: translate(0px, 0px) rotate(-6.5deg); }
1090 |   74% { transform: translate(0px, 0px) rotate(-5.5deg); }
1091 |   76% { transform: translate(0px, 0px) rotate(1.5deg); }
1092 |   78% { transform: translate(0px, 0px) rotate(-1.5deg); }
1093 |   80% { transform: translate(0px, 0px) rotate(3.5deg); }
1094 |   82% { transform: translate(0px, 0px) rotate(1.5deg); }
1095 |   84% { transform: translate(0px, 0px) rotate(-7.5deg); }
1096 |   86% { transform: translate(0px, 0px) rotate(-0.5deg); }
1097 |   88% { transform: translate(0px, 0px) rotate(0.5deg); }
1098 |   90% { transform: translate(0px, 0px) rotate(-3.5deg); }
1099 |   92% { transform: translate(0px, 0px) rotate(-4.5deg); }
1100 |   94% { transform: translate(0px, 0px) rotate(2.5deg); }
1101 |   96% { transform: translate(0px, 0px) rotate(2.5deg); }
1102 |   98% { transform: translate(0px, 0px) rotate(-2.5deg); } }
1103 | 
1104 | @-webkit-keyframes shake-opacity { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); opacity: 0.2; }
1105 |   10% { -webkit-transform: translate(3px, 4px) rotate(1.5deg); opacity: 0.4; }
1106 |   20% { -webkit-transform: translate(1px, 4px) rotate(0.5deg); opacity: 0.3; }
1107 |   30% { -webkit-transform: translate(4px, -3px) rotate(0.5deg); opacity: 0.5; }
1108 |   40% { -webkit-transform: translate(1px, -3px) rotate(0.5deg); opacity: 0.9; }
1109 |   50% { -webkit-transform: translate(4px, -5px) rotate(-2.5deg); opacity: 0.9; }
1110 |   60% { -webkit-transform: translate(-1px, 0px) rotate(-1.5deg); opacity: 0.5; }
1111 |   70% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg); opacity: 0.6; }
1112 |   80% { -webkit-transform: translate(3px, 3px) rotate(1.5deg); opacity: 0.5; }
1113 |   90% { -webkit-transform: translate(-5px, -4px) rotate(1.5deg); opacity: 0.5; } }
1114 | 
1115 | @-ms-keyframes shake-opacity { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); opacity: 0.4; }
1116 |   10% { -ms-transform: translate(-3px, 4px) rotate(0.5deg); opacity: 0.1; }
1117 |   20% { -ms-transform: translate(-5px, 0px) rotate(0.5deg); opacity: 0.5; }
1118 |   30% { -ms-transform: translate(2px, -2px) rotate(-0.5deg); opacity: 0.2; }
1119 |   40% { -ms-transform: translate(1px, 4px) rotate(-0.5deg); opacity: 0; }
1120 |   50% { -ms-transform: translate(3px, -5px) rotate(-0.5deg); opacity: 0.1; }
1121 |   60% { -ms-transform: translate(-3px, -1px) rotate(-1.5deg); opacity: 0.8; }
1122 |   70% { -ms-transform: translate(-4px, -5px) rotate(1.5deg); opacity: 0.5; }
1123 |   80% { -ms-transform: translate(3px, 0px) rotate(-2.5deg); opacity: 0.8; }
1124 |   90% { -ms-transform: translate(-3px, 2px) rotate(1.5deg); opacity: 0.3; } }
1125 | 
1126 | @keyframes shake-opacity { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 0.7; }
1127 |   10% { transform: translate(4px, 0px) rotate(-0.5deg); opacity: 0.4; }
1128 |   20% { transform: translate(4px, -3px) rotate(1.5deg); opacity: 0.4; }
1129 |   30% { transform: translate(-2px, 2px) rotate(-0.5deg); opacity: 0.2; }
1130 |   40% { transform: translate(2px, -1px) rotate(1.5deg); opacity: 0.3; }
1131 |   50% { transform: translate(4px, 1px) rotate(0.5deg); opacity: 0.5; }
1132 |   60% { transform: translate(-5px, -3px) rotate(-2.5deg); opacity: 0.8; }
1133 |   70% { transform: translate(4px, 2px) rotate(0.5deg); opacity: 0.8; }
1134 |   80% { transform: translate(-1px, 3px) rotate(-0.5deg); opacity: 0.3; }
1135 |   90% { transform: translate(-5px, 4px) rotate(-0.5deg); opacity: 0; } }
1136 | 
1137 | @-webkit-keyframes shake-crazy { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); opacity: 0.9; }
1138 |   10% { -webkit-transform: translate(-5px, -5px) rotate(-10deg); opacity: 0.3; }
1139 |   20% { -webkit-transform: translate(18px, -17px) rotate(-5deg); opacity: 0; }
1140 |   30% { -webkit-transform: translate(-15px, 2px) rotate(-3deg); opacity: 0.8; }
1141 |   40% { -webkit-transform: translate(-9px, -4px) rotate(3deg); opacity: 0.6; }
1142 |   50% { -webkit-transform: translate(17px, -7px) rotate(-5deg); opacity: 0.6; }
1143 |   60% { -webkit-transform: translate(-20px, 10px) rotate(-3deg); opacity: 0.6; }
1144 |   70% { -webkit-transform: translate(-18px, -4px) rotate(-1deg); opacity: 0.3; }
1145 |   80% { -webkit-transform: translate(12px, 13px) rotate(6deg); opacity: 0.3; }
1146 |   90% { -webkit-transform: translate(14px, 0px) rotate(8deg); opacity: 0.4; } }
1147 | 
1148 | @-ms-keyframes shake-crazy { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); opacity: 0.4; }
1149 |   10% { -ms-transform: translate(-15px, 0px) rotate(-10deg); opacity: 0.4; }
1150 |   20% { -ms-transform: translate(-3px, 13px) rotate(7deg); opacity: 0; }
1151 |   30% { -ms-transform: translate(8px, 4px) rotate(6deg); opacity: 0; }
1152 |   40% { -ms-transform: translate(9px, -17px) rotate(0deg); opacity: 0.5; }
1153 |   50% { -ms-transform: translate(6px, 1px) rotate(-4deg); opacity: 0.6; }
1154 |   60% { -ms-transform: translate(-1px, 7px) rotate(-9deg); opacity: 0.1; }
1155 |   70% { -ms-transform: translate(-6px, 6px) rotate(-6deg); opacity: 0; }
1156 |   80% { -ms-transform: translate(-11px, -2px) rotate(-1deg); opacity: 0.8; }
1157 |   90% { -ms-transform: translate(-5px, 10px) rotate(4deg); opacity: 0.5; } }
1158 | 
1159 | @keyframes shake-crazy { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 0.3; }
1160 |   10% { transform: translate(18px, 9px) rotate(3deg); opacity: 0.3; }
1161 |   20% { transform: translate(-15px, -19px) rotate(0deg); opacity: 0.8; }
1162 |   30% { transform: translate(-5px, -2px) rotate(-4deg); opacity: 0.9; }
1163 |   40% { transform: translate(-19px, -18px) rotate(-2deg); opacity: 0.1; }
1164 |   50% { transform: translate(11px, 8px) rotate(4deg); opacity: 0; }
1165 |   60% { transform: translate(9px, 0px) rotate(-4deg); opacity: 0.6; }
1166 |   70% { transform: translate(-13px, 6px) rotate(-1deg); opacity: 0.8; }
1167 |   80% { transform: translate(12px, 17px) rotate(3deg); opacity: 0.9; }
1168 |   90% { transform: translate(11px, 13px) rotate(7deg); opacity: 0.1; } }
1169 | 


--------------------------------------------------------------------------------
/Demo/WebSocket.html:
--------------------------------------------------------------------------------
 1 | <html lang="en" xmlns:th="http://www.thymeleaf.org">
 2 | <head>
 3 |     <meta charset="UTF-8">
 4 |     <title>测试</title>
 5 |     <style>
 6 |         #message{
 7 |             height: 520px;
 8 |             border-bottom: 1px solid gray;
 9 |             padding: 20px 30px;
10 |         }
11 |         #container{
12 |             margin: 0 auto;
13 |             width: 720px;
14 |             border: 1px solid gray
15 |         }
16 |         input{
17 |             width: 300px;
18 |             height: 36px;
19 |             border: 1px solid gray;
20 |             background:none;
21 |             outline:none;
22 |         }
23 |         input:focus{
24 |             border-color: yellow;
25 |         }
26 |         button{
27 |             height: 36px;
28 |         }
29 |     </style>
30 | </head>
31 | <body>
32 | <div id="container">
33 |     <div id="message">
34 | 
35 |     </div>
36 |     <div>
37 |         <input id="text" type="text" placeholder="输入内容..."/>
38 |         <button onclick="send()">发送消息</button>
39 |     </div>
40 | </div>
41 | <script th:inline="javascript" type="text/javascript">
42 |     var websocket = null;
43 | 
44 |     //判断当前浏览器是否支持WebSocket
45 |     if ('WebSocket' in window) {
46 |         websocket = new WebSocket("ws://localhost:8099/myWebSocket");
47 |     }
48 |     else {
49 |         alert('当前浏览器不支持websocket');
50 |     }
51 | 
52 |     //发送消息
53 |     function send() {
54 |         var message = document.getElementById('text').value;
55 |         websocket.send(message);
56 |     }
57 |     //接收到消息的回调方法
58 |     websocket.onmessage = function (event) {
59 |         var data = event.data;
60 |         document.getElementById('message').innerHTML += data+'<br/>';
61 |     }
62 | 
63 |     //连接成功建立的回调方法
64 |     websocket.onopen = function () {
65 |         console.log("onopen...");
66 |     }
67 |     //连接关闭的回调方法
68 |     websocket.onclose = function () {
69 |         console.log("onclose...");
70 |     }
71 |     //连接发生错误的回调方法
72 |     websocket.onerror = function () {
73 |         console.log("onerror...");
74 |     };
75 |     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
76 |     window.onbeforeunload = function () {
77 |         closeWebSocket();
78 |     }
79 |     //关闭WebSocket连接
80 |     function closeWebSocket() {
81 |         websocket.close();
82 |     }
83 | 
84 | </script>
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/Demo/camera-cut.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | <head>
 4 |   <meta charset="UTF-8" />
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |   <title>使用js调用设备摄像头并实现拍照</title>
 8 |   <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
 9 |   <style type="text/css">
10 |     *{margin:0;padding:0}video{width:200px}button{width:100px;height:60px}
11 |   </style>
12 | </head>
13 | <body>
14 |   
15 |   <div class="box">
16 |     <video src=""></video>
17 |     <button class='shot'>拍照</button>
18 |     <canvas id='canvas'></canvas>
19 |     <img src=''>
20 |   </div>
21 |   
22 |   <script type="text/javascript">
23 |     // 视频大小
24 |     var constraints = {audio: true, video: {width: 200,height: 250}};
25 |     // 开启视频
26 |     navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
27 |       console.log('getUserMedia:', mediaStream)
28 |       var video = document.querySelector('video');
29 |       video.srcObject = mediaStream;
30 |       video.onloadedmetadata = function(e) {
31 |         video.play();
32 |       };
33 |       
34 |       // 使用canvas进行拍照
35 |       var canvas = document.getElementById('canvas')
36 |       $('button').on('click', function () {
37 |         canvas.getContext('2d').drawImage(video, 0, 0, 200, 250);
38 |         $('img').css('src', canvas.toDataURL("image/png"))
39 |       })
40 |       
41 |     }).catch(function(err) {
42 |       console.log(err.name + ": " + err.message);
43 |     });
44 |     
45 |   </script>
46 | </body>
47 | </html>
48 | 
49 | 


--------------------------------------------------------------------------------
/JS/001.Date/main.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   data () {
  3 |     /* eslint-disable */
  4 |     return {
  5 |       
  6 |     }
  7 |     /* eslint-enable */
  8 |   },
  9 | 
 10 |   /* eslint-disable */
 11 |   methods: {
 12 |     /**
 13 |      * @desc 获取当前时间并进行格式化
 14 |      * type {day : 2011-1-1 , ss : 2011-1-1 12:20:33 , cms - 主页专用}
 15 |      */
 16 |     getNowDate(type){
 17 |       let now = new Date()
 18 |       let year = now.getFullYear()
 19 |       let month = now.getMonth() + 1
 20 |       let day = now.getDate()
 21 |       let hh = now.getHours()
 22 |       let mm = now.getMinutes()
 23 |       let ss = now.getSeconds()
 24 | 
 25 |       month = month < 10 ? '0'+ month : month
 26 |       day = day < 10 ? '0'+ day : day
 27 | 
 28 |       hh = hh < 10 ? '0'+ hh : hh
 29 |       mm = mm < 10 ? '0'+ mm : mm
 30 |       ss = ss < 10 ? '0'+ ss : ss
 31 | 
 32 |       let weekk = ''
 33 |       switch(week){
 34 |         case 0:
 35 |           weekk = 'Sun.';
 36 |           break;
 37 |         case 1:
 38 |           weekk = 'Mon.';
 39 |           break;
 40 |         case 2:
 41 |           weekk = 'Tues.';
 42 |           break;
 43 |         case 3:
 44 |           weekk = 'Wed.';
 45 |           break;
 46 |         case 4:
 47 |           weekk = 'Thur.';
 48 |           break;
 49 |         case 5:
 50 |           weekk = 'Fri.';
 51 |           break;
 52 |         case 6:
 53 |           weekk = 'Sat.';
 54 |           break;
 55 |       }
 56 | 
 57 |       if(type == 'day'){
 58 |         return year +'-'+ month +'-'+ day
 59 |       } else if(type == 'ss'){
 60 |         return year +'-'+ month +'-'+ day + ' '+ hh + ':' + mm + ':' + ss
 61 |       } else if(type == 'cms'){
 62 |         return {
 63 |           year: year +'-'+ month +'-'+ day,
 64 |           week: weekk,
 65 |           time: hh + ':' + mm + ':' + ss,
 66 |         }
 67 |       }
 68 |     },
 69 | 
 70 |     /**
 71 |      * @desc 计算年龄
 72 |      * 计算年份->计算月份->计算天数
 73 |      * 现在时间，比较时间
 74 |      */
 75 |     getDiffYmdBetweenDate(sDate1,sDate2){
 76 |       var fixDate = function(sDate){
 77 |         var aD = sDate.split('-');
 78 |         for(var i = 0; i < aD.length; i++){
 79 |             aD[i] = fixZero(parseInt(aD[i]));
 80 |         }
 81 |         return aD.join('-');
 82 |       };
 83 |       var fixZero = function(n){
 84 |         return n < 10 ? '0'+n : n;
 85 |       };
 86 |       var fixInt = function(a){
 87 |         for(var i = 0; i < a.length; i++){
 88 |             a[i] = parseInt(a[i]);
 89 |         }
 90 |         return a;
 91 |       };
 92 |       var getMonthDays = function(y,m){
 93 |         var aMonthDays = [0,31,28,31,30,31,30,31,31,30,31,30,31];
 94 |         if((y%400 == 0) || (y%4==0 && y%100!=0)){
 95 |             aMonthDays[2] = 29;
 96 |         }
 97 |         return aMonthDays[m];
 98 |       };
 99 |       var checkDate = function(sDate){
100 |       };
101 |       var y = 0;
102 |       var m = 0;
103 |       var d = 0;
104 |       var sTmp;
105 |       var aTmp;
106 |       sDate1 = fixDate(sDate1);
107 |       sDate2 = fixDate(sDate2);
108 |       if(sDate1 > sDate2){
109 |         return 'past'
110 |       }
111 |       var aDate1 = sDate1.split('-');
112 |         aDate1 = fixInt(aDate1);
113 |       var aDate2 = sDate2.split('-');
114 |         aDate2 = fixInt(aDate2);
115 |       //计算相差的年份
116 |       /*aTmp = [aDate1[0]+1,fixZero(aDate1[1]),fixZero(aDate1[2])];
117 |       while(aTmp.join('-') <= sDate2){
118 |           y++;
119 |           aTmp[0]++;
120 |       }*/
121 |       y = aDate2[0] - aDate1[0];
122 |       if( sDate2.replace(aDate2[0],'') < sDate1.replace(aDate1[0],'')){
123 |         y = y - 1;
124 |       }
125 |       //计算月份
126 |       aTmp = [aDate1[0]+y,aDate1[1],fixZero(aDate1[2])];
127 |       while(true){
128 |         if(aTmp[1] == 12){
129 |           aTmp[0]++;
130 |           aTmp[1] = 1;
131 |         }else{
132 |           aTmp[1]++;
133 |         }
134 |         if(([aTmp[0],fixZero(aTmp[1]),aTmp[2]]).join('-') <= sDate2){
135 |           m++;
136 |         } else {
137 |           break;
138 |         }
139 |       }
140 |       //计算天数
141 |       aTmp = [aDate1[0]+y,aDate1[1]+m,aDate1[2]];
142 |       if(aTmp[1] > 12){
143 |         aTmp[0]++;
144 |         aTmp[1] -= 12;
145 |       }
146 |       while(true){
147 |         if(aTmp[2] == getMonthDays(aTmp[0],aTmp[1])){
148 |           aTmp[1]++;
149 |           aTmp[2] = 1;
150 |         } else {
151 |           aTmp[2]++;
152 |         }
153 |         sTmp = ([aTmp[0],fixZero(aTmp[1]),fixZero(aTmp[2])]).join('-');
154 |         if(sTmp <= sDate2){
155 |           d++;
156 |         } else {
157 |           break;
158 |         }
159 |       }
160 |       return {y:y,m:m,d:d}
161 |     },
162 |   }
163 |   /* eslint-enable */
164 | }
165 | 


--------------------------------------------------------------------------------
/JS/002.Excel/Blob.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* Blob.js
  3 |  * A Blob implementation.
  4 |  * 2014-05-27
  5 |  *
  6 |  * By Eli Grey, http://eligrey.com
  7 |  * By Devin Samarin, https://github.com/eboyjr
  8 |  * License: X11/MIT
  9 |  *   See LICENSE.md
 10 |  */
 11 | 
 12 | /*global self, unescape */
 13 | /*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 14 |  plusplus: true */
 15 | 
 16 | /*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
 17 | 
 18 | (function (view) {
 19 |   view.URL = view.URL || view.webkitURL;
 20 | 
 21 |   if (view.Blob && view.URL) {
 22 |     try {
 23 |       new Blob;
 24 |       return;
 25 |     } catch (e) {}
 26 |   }
 27 | 
 28 |   // Internally we use a BlobBuilder implementation to base Blob off of
 29 |   // in order to support older browsers that only have BlobBuilder
 30 |   var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
 31 |     var
 32 |       get_class = function (object) {
 33 |         return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
 34 |       },
 35 |       FakeBlobBuilder = function BlobBuilder() {
 36 |         this.data = [];
 37 |       },
 38 |       FakeBlob = function Blob(data, type, encoding) {
 39 |         this.data = data;
 40 |         this.size = data.length;
 41 |         this.type = type;
 42 |         this.encoding = encoding;
 43 |       },
 44 |       FBB_proto = FakeBlobBuilder.prototype,
 45 |       FB_proto = FakeBlob.prototype,
 46 |       FileReaderSync = view.FileReaderSync,
 47 |       FileException = function (type) {
 48 |         this.code = this[this.name = type];
 49 |       },
 50 |       file_ex_codes = (
 51 |         "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
 52 |         "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
 53 |       ).split(" "),
 54 |       file_ex_code = file_ex_codes.length,
 55 |       real_URL = view.URL || view.webkitURL || view,
 56 |       real_create_object_URL = real_URL.createObjectURL,
 57 |       real_revoke_object_URL = real_URL.revokeObjectURL,
 58 |       URL = real_URL,
 59 |       btoa = view.btoa,
 60 |       atob = view.atob
 61 | 
 62 |       ,
 63 |       ArrayBuffer = view.ArrayBuffer,
 64 |       Uint8Array = view.Uint8Array;
 65 |     FakeBlob.fake = FB_proto.fake = true;
 66 |     while (file_ex_code--) {
 67 |       FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
 68 |     }
 69 |     if (!real_URL.createObjectURL) {
 70 |       URL = view.URL = {};
 71 |     }
 72 |     URL.createObjectURL = function (blob) {
 73 |       var
 74 |         type = blob.type,
 75 |         data_URI_header;
 76 |       if (type === null) {
 77 |         type = "application/octet-stream";
 78 |       }
 79 |       if (blob instanceof FakeBlob) {
 80 |         data_URI_header = "data:" + type;
 81 |         if (blob.encoding === "base64") {
 82 |           return data_URI_header + ";base64," + blob.data;
 83 |         } else if (blob.encoding === "URI") {
 84 |           return data_URI_header + "," + decodeURIComponent(blob.data);
 85 |         }
 86 |         if (btoa) {
 87 |           return data_URI_header + ";base64," + btoa(blob.data);
 88 |         } else {
 89 |           return data_URI_header + "," + encodeURIComponent(blob.data);
 90 |         }
 91 |       } else if (real_create_object_URL) {
 92 |         return real_create_object_URL.call(real_URL, blob);
 93 |       }
 94 |     };
 95 |     URL.revokeObjectURL = function (object_URL) {
 96 |       if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
 97 |         real_revoke_object_URL.call(real_URL, object_URL);
 98 |       }
 99 |     };
100 |     FBB_proto.append = function (data /*, endings*/ ) {
101 |       var bb = this.data;
102 |       // decode data to a binary string
103 |       if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
104 |         var
105 |           str = "",
106 |           buf = new Uint8Array(data),
107 |           i = 0,
108 |           buf_len = buf.length;
109 |         for (; i < buf_len; i++) {
110 |           str += String.fromCharCode(buf[i]);
111 |         }
112 |         bb.push(str);
113 |       } else if (get_class(data) === "Blob" || get_class(data) === "File") {
114 |         if (FileReaderSync) {
115 |           var fr = new FileReaderSync;
116 |           bb.push(fr.readAsBinaryString(data));
117 |         } else {
118 |           // async FileReader won't work as BlobBuilder is sync
119 |           throw new FileException("NOT_READABLE_ERR");
120 |         }
121 |       } else if (data instanceof FakeBlob) {
122 |         if (data.encoding === "base64" && atob) {
123 |           bb.push(atob(data.data));
124 |         } else if (data.encoding === "URI") {
125 |           bb.push(decodeURIComponent(data.data));
126 |         } else if (data.encoding === "raw") {
127 |           bb.push(data.data);
128 |         }
129 |       } else {
130 |         if (typeof data !== "string") {
131 |           data += ""; // convert unsupported types to strings
132 |         }
133 |         // decode UTF-16 to binary string
134 |         bb.push(unescape(encodeURIComponent(data)));
135 |       }
136 |     };
137 |     FBB_proto.getBlob = function (type) {
138 |       if (!arguments.length) {
139 |         type = null;
140 |       }
141 |       return new FakeBlob(this.data.join(""), type, "raw");
142 |     };
143 |     FBB_proto.toString = function () {
144 |       return "[object BlobBuilder]";
145 |     };
146 |     FB_proto.slice = function (start, end, type) {
147 |       var args = arguments.length;
148 |       if (args < 3) {
149 |         type = null;
150 |       }
151 |       return new FakeBlob(
152 |         this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
153 |       );
154 |     };
155 |     FB_proto.toString = function () {
156 |       return "[object Blob]";
157 |     };
158 |     FB_proto.close = function () {
159 |       this.size = this.data.length = 0;
160 |     };
161 |     return FakeBlobBuilder;
162 |   }(view));
163 | 
164 |   view.Blob = function Blob(blobParts, options) {
165 |     var type = options ? (options.type || "") : "";
166 |     var builder = new BlobBuilder();
167 |     if (blobParts) {
168 |       for (var i = 0, len = blobParts.length; i < len; i++) {
169 |         builder.append(blobParts[i]);
170 |       }
171 |     }
172 |     return builder.getBlob(type);
173 |   };
174 | }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
175 | 


--------------------------------------------------------------------------------
/JS/002.Excel/Export2Excel.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | require('script-loader!file-saver');
  3 | require('./Blob');
  4 | require('script-loader!xlsx/dist/xlsx.core.min');
  5 | 
  6 | function generateArray(table) {
  7 |   var out = [];
  8 |   var rows = table.querySelectorAll('tr');
  9 |   var ranges = [];
 10 |   for (var R = 0; R < rows.length; ++R) {
 11 |     var outRow = [];
 12 |     var row = rows[R];
 13 |     var columns = row.querySelectorAll('td');
 14 |     for (var C = 0; C < columns.length; ++C) {
 15 |       var cell = columns[C];
 16 |       var colspan = cell.getAttribute('colspan');
 17 |       var rowspan = cell.getAttribute('rowspan');
 18 |       var cellValue = cell.innerText;
 19 |       if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
 20 | 
 21 |       //Skip ranges
 22 |       ranges.forEach(function (range) {
 23 |         if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
 24 |           for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
 25 |         }
 26 |       });
 27 | 
 28 |       //Handle Row Span
 29 |       if (rowspan || colspan) {
 30 |         rowspan = rowspan || 1;
 31 |         colspan = colspan || 1;
 32 |         ranges.push({
 33 |           s: {
 34 |             r: R,
 35 |             c: outRow.length
 36 |           },
 37 |           e: {
 38 |             r: R + rowspan - 1,
 39 |             c: outRow.length + colspan - 1
 40 |           }
 41 |         });
 42 |       };
 43 | 
 44 |       //Handle Value
 45 |       outRow.push(cellValue !== "" ? cellValue : null);
 46 | 
 47 |       //Handle Colspan
 48 |       if (colspan)
 49 |         for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
 50 |     }
 51 |     out.push(outRow);
 52 |   }
 53 |   return [out, ranges];
 54 | };
 55 | 
 56 | function datenum(v, date1904) {
 57 |   if (date1904) v += 1462;
 58 |   var epoch = Date.parse(v);
 59 |   return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
 60 | }
 61 | 
 62 | function sheet_from_array_of_arrays(data, opts) {
 63 |   var ws = {};
 64 |   var range = {
 65 |     s: {
 66 |       c: 10000000,
 67 |       r: 10000000
 68 |     },
 69 |     e: {
 70 |       c: 0,
 71 |       r: 0
 72 |     }
 73 |   };
 74 |   for (var R = 0; R != data.length; ++R) {
 75 |     for (var C = 0; C != data[R].length; ++C) {
 76 |       if (range.s.r > R) range.s.r = R;
 77 |       if (range.s.c > C) range.s.c = C;
 78 |       if (range.e.r < R) range.e.r = R;
 79 |       if (range.e.c < C) range.e.c = C;
 80 |       var cell = {
 81 |         v: data[R][C]
 82 |       };
 83 |       if (cell.v == null) continue;
 84 |       var cell_ref = XLSX.utils.encode_cell({
 85 |         c: C,
 86 |         r: R
 87 |       });
 88 | 
 89 |       if (typeof cell.v === 'number') cell.t = 'n';
 90 |       else if (typeof cell.v === 'boolean') cell.t = 'b';
 91 |       else if (cell.v instanceof Date) {
 92 |         cell.t = 'n';
 93 |         cell.z = XLSX.SSF._table[14];
 94 |         cell.v = datenum(cell.v);
 95 |       } else cell.t = 's';
 96 | 
 97 |       ws[cell_ref] = cell;
 98 |     }
 99 |   }
100 |   if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
101 |   return ws;
102 | }
103 | 
104 | function Workbook() {
105 |   if (!(this instanceof Workbook)) return new Workbook();
106 |   this.SheetNames = [];
107 |   this.Sheets = {};
108 | }
109 | 
110 | function s2ab(s) {
111 |   var buf = new ArrayBuffer(s.length);
112 |   var view = new Uint8Array(buf);
113 |   for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
114 |   return buf;
115 | }
116 | 
117 | export function export_table_to_excel(id) {
118 |   var theTable = document.getElementById(id);
119 |   console.log('a')
120 |   var oo = generateArray(theTable);
121 |   var ranges = oo[1];
122 | 
123 |   /* original data */
124 |   var data = oo[0];
125 |   var ws_name = "SheetJS";
126 |   console.log(data);
127 | 
128 |   var wb = new Workbook(),
129 |     ws = sheet_from_array_of_arrays(data);
130 | 
131 |   /* add ranges to worksheet */
132 |   // ws['!cols'] = ['apple', 'banan'];
133 |   ws['!merges'] = ranges;
134 | 
135 |   /* add worksheet to workbook */
136 |   wb.SheetNames.push(ws_name);
137 |   wb.Sheets[ws_name] = ws;
138 | 
139 |   var wbout = XLSX.write(wb, {
140 |     bookType: 'xlsx',
141 |     bookSST: false,
142 |     type: 'binary'
143 |   });
144 | 
145 |   saveAs(new Blob([s2ab(wbout)], {
146 |     type: "application/octet-stream"
147 |   }), "test.xlsx")
148 | }
149 | 
150 | function formatJson(jsonData) {
151 |   console.log(jsonData)
152 | }
153 | export function export_json_to_excel(th, jsonData, defaultTitle) {
154 | 
155 |   /* original data */
156 | 
157 |   var data = jsonData;
158 |   data.unshift(th);
159 |   var ws_name = "SheetJS";
160 | 
161 |   var wb = new Workbook(),
162 |     ws = sheet_from_array_of_arrays(data);
163 | 
164 | 
165 |   /* add worksheet to workbook */
166 |   wb.SheetNames.push(ws_name);
167 |   wb.Sheets[ws_name] = ws;
168 | 
169 |   var wbout = XLSX.write(wb, {
170 |     bookType: 'xlsx',
171 |     bookSST: false,
172 |     type: 'binary'
173 |   });
174 |   var title = defaultTitle || '列表'
175 |   saveAs(new Blob([s2ab(wbout)], {
176 |     type: "application/octet-stream"
177 |   }), title + ".xlsx")
178 | }
179 | 


--------------------------------------------------------------------------------
/JS/003.Utils/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 获取uuid
 3 |  */
 4 | export function getUUID() {
 5 |   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
 6 |     return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
 7 |   })
 8 | }
 9 | 
10 | generateUUID() {
11 |   var d = new Date().getTime()
12 |   if (window.performance && typeof window.performance.now === "function") {
13 |     d += performance.now()
14 |   }
15 |   var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
16 |     var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16)
17 |     return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
18 |   })
19 |   return uuid
20 | }
21 | 
22 | guid() {
23 |   function S4() {
24 |     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
25 |   }
26 |   return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4())
27 | }
28 | 
29 | function uuid2(len, radix) {
30 |   var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
31 |   var uuid = [],
32 |     i;
33 |   radix = radix || chars.length;
34 | 
35 |   if (len) {
36 |     for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
37 |   } else {
38 |     var r;
39 |     uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
40 |     uuid[14] = '4';
41 |     for (i = 0; i < 36; i++) {
42 |       if (!uuid[i]) {
43 |         r = 0 | Math.random() * 16;
44 |         uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
45 |       }
46 |     }
47 |   }
48 |   return uuid.join('');
49 | }
50 | /**
51 |  * 邮箱
52 |  * @param {*} s
53 |  */
54 | export function isEmail(s) {
55 |   return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
56 | }
57 | 
58 | /**
59 |  * 手机号码
60 |  * @param {*} s
61 |  */
62 | export function isMobile(s) {
63 |   return /^1[0-9]{10}$/.test(s)
64 | }
65 | 
66 | /**
67 |  * 电话号码
68 |  * @param {*} s
69 |  */
70 | export function isPhone(s) {
71 |   return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
72 | }
73 | 
74 | /**
75 |  * URL地址
76 |  * @param {*} s
77 |  */
78 | export function isURL(s) {
79 |   return /^http[s]?:\/\/.*/.test(s)
80 | }
81 | 


--------------------------------------------------------------------------------
/JS/004.Num/main.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   methods : {
 3 |     //  数字转千分
 4 |     toThousands(num) {
 5 |       var num = (num || 0).toString(), result = '';
 6 |       while (num.length > 3) {
 7 |         result = ',' + num.slice(-3) + result;
 8 |         num = num.slice(0, num.length - 3);
 9 |       }
10 |       if (num) { result = num + result; }
11 |       return result;
12 |     },
13 |   }
14 | }


--------------------------------------------------------------------------------
/JS/005.Canvas/f2-canvas/f2-canvas.js:
--------------------------------------------------------------------------------
  1 | // f2-canvas.js
  2 | import Renderer from './lib/renderer';
  3 | import F2 from './lib/f2';
  4 | 
  5 | // 适配小程序的事件机制
  6 | F2.Util.addEventListener = function (source, type, listener) {
  7 |   source.addListener(type, listener);
  8 | };
  9 | 
 10 | F2.Util.removeEventListener = function (source, type, listener) {
 11 |   source.removeListener(type, listener);
 12 | };
 13 | 
 14 | F2.Util.createEvent = function (event, chart) {
 15 |   const type = event.type;
 16 |   let x = 0;
 17 |   let y = 0;
 18 |   const touches = event.touches;
 19 |   if (touches && touches.length > 0) {
 20 |     x = touches[0].x;
 21 |     y = touches[0].y;
 22 |   }
 23 | 
 24 |   return {
 25 |     type,
 26 |     chart,
 27 |     x,
 28 |     y
 29 |   };
 30 | };
 31 | 
 32 | Component({
 33 |   /**
 34 |    * 组件的属性列表
 35 |    */
 36 |   properties: {
 37 |     canvasId: {
 38 |       type: String,
 39 |       value: 'f2-canvas'
 40 |     },
 41 | 
 42 |     opts: {
 43 |       type: Object
 44 |     }
 45 |   },
 46 | 
 47 |   /**
 48 |    * 组件的初始数据
 49 |    */
 50 |   data: {
 51 | 
 52 |   },
 53 | 
 54 |   ready: function () {
 55 |     if (!this.data.opts) {
 56 |       console.warn('组件需绑定 opts 变量，例：<ff-canvas id="mychart-dom-bar" '
 57 |         + 'canvas-id="mychart-bar" opts="{{ opts }}"></ff-canvas>');
 58 |       return;
 59 |     }
 60 | 
 61 |     if (!this.data.opts.lazyLoad) {
 62 |       this.init();
 63 |     }
 64 |   },
 65 | 
 66 |   /**
 67 |    * 组件的方法列表
 68 |    */
 69 |   methods: {
 70 |     init: function(callback) {
 71 |       const version = wx.version.version.split('.').map(n => parseInt(n, 10));
 72 |       const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
 73 |         || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
 74 |       if (!isValid) {
 75 |         console.error('微信基础库版本过低，需大于等于 1.9.91。');
 76 |         return;
 77 |       }
 78 | 
 79 |       const ctx = wx.createCanvasContext(this.data.canvasId, this); // 获取小程序上下文
 80 |       const canvas = new Renderer(ctx);
 81 |       this.canvas = canvas;
 82 | 
 83 |       const query = wx.createSelectorQuery().in(this);
 84 |       query.select('.f2-canvas').boundingClientRect(res => {
 85 |         if (typeof callback === 'function') {
 86 |           this.chart = callback(canvas, res.width, res.height);
 87 |         } else if (this.data.opts && this.data.opts.onInit) {
 88 |           this.chart = this.data.opts.onInit(canvas, res.width, res.height);
 89 |         }
 90 |       }).exec();
 91 |     },
 92 |     touchStart(e) {
 93 |        if (this.canvas) {
 94 |          this.canvas.emitEvent('touchstart', [e]);
 95 |        }
 96 |     },
 97 |     touchMove(e) {
 98 |       if (this.canvas) {
 99 |         this.canvas.emitEvent('touchmove', [e]);
100 |       }
101 |     },
102 |     touchEnd(e) {
103 |       if (this.canvas) {
104 |         this.canvas.emitEvent('touchend', [e]);
105 |       }
106 |     },
107 |     press(e) {
108 |       if (this.canvas) {
109 |         this.canvas.emitEvent('press', [e]);
110 |       }
111 |     }
112 |   }
113 | })
114 | 


--------------------------------------------------------------------------------
/JS/005.Canvas/f2-canvas/f2-canvas.json:
--------------------------------------------------------------------------------
1 | {
2 |   "component": true,
3 |   "usingComponents": {}
4 | }


--------------------------------------------------------------------------------
/JS/005.Canvas/f2-canvas/f2-canvas.wxml:
--------------------------------------------------------------------------------
 1 | <canvas
 2 | class="f2-canvas"
 3 | canvas-id="{{ canvasId }}"
 4 | bindinit="init"
 5 | bindtouchstart="touchStart"
 6 | bindtouchmove="touchMove"
 7 | bindtouchend="touchEnd"
 8 | bindlongtap="press"
 9 | >
10 | </canvas>


--------------------------------------------------------------------------------
/JS/005.Canvas/f2-canvas/f2-canvas.wxss:
--------------------------------------------------------------------------------
1 | /* f2-canvas.wxss */
2 | .f2-canvas {
3 |   width: 100%;
4 |   height: 100%;
5 | }


--------------------------------------------------------------------------------
/JS/005.Canvas/f2-canvas/lib/EventEmitter.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * EventEmitter v5.2.4 - git.io/ee
3 |  * Unlicense - http://unlicense.org/
4 |  * Oliver Caldwell - http://oli.me.uk/
5 |  * @preserve
6 |  */
7 | !function(e){"use strict";function t(){}function n(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function r(e){return function(){return this[e].apply(this,arguments)}}function i(e){return"function"==typeof e||e instanceof RegExp||!(!e||"object"!=typeof e)&&i(e.listener)}var s=t.prototype,o=e.EventEmitter;s.getListeners=function(e){var t,n,r=this._getEvents();if(e instanceof RegExp){t={};for(n in r)r.hasOwnProperty(n)&&e.test(n)&&(t[n]=r[n])}else t=r[e]||(r[e]=[]);return t},s.flattenListeners=function(e){var t,n=[];for(t=0;t<e.length;t+=1)n.push(e[t].listener);return n},s.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},s.addListener=function(e,t){if(!i(t))throw new TypeError("listener must be a function");var r,s=this.getListenersAsObject(e),o="object"==typeof t;for(r in s)s.hasOwnProperty(r)&&n(s[r],t)===-1&&s[r].push(o?t:{listener:t,once:!1});return this},s.on=r("addListener"),s.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},s.once=r("addOnceListener"),s.defineEvent=function(e){return this.getListeners(e),this},s.defineEvents=function(e){for(var t=0;t<e.length;t+=1)this.defineEvent(e[t]);return this},s.removeListener=function(e,t){var r,i,s=this.getListenersAsObject(e);for(i in s)s.hasOwnProperty(i)&&(r=n(s[i],t),r!==-1&&s[i].splice(r,1));return this},s.off=r("removeListener"),s.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},s.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},s.manipulateListeners=function(e,t,n){var r,i,s=e?this.removeListener:this.addListener,o=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(r=n.length;r--;)s.call(this,t,n[r]);else for(r in t)t.hasOwnProperty(r)&&(i=t[r])&&("function"==typeof i?s.call(this,r,i):o.call(this,r,i));return this},s.removeEvent=function(e){var t,n=typeof e,r=this._getEvents();if("string"===n)delete r[e];else if(e instanceof RegExp)for(t in r)r.hasOwnProperty(t)&&e.test(t)&&delete r[t];else delete this._events;return this},s.removeAllListeners=r("removeEvent"),s.emitEvent=function(e,t){var n,r,i,s,o,u=this.getListenersAsObject(e);for(s in u)if(u.hasOwnProperty(s))for(n=u[s].slice(0),i=0;i<n.length;i++)r=n[i],r.once===!0&&this.removeListener(e,r.listener),o=r.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,r.listener);return this},s.trigger=r("emitEvent"),s.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},s.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},s._getOnceReturnValue=function(){return!this.hasOwnProperty("_onceReturnValue")||this._onceReturnValue},s._getEvents=function(){return this._events||(this._events={})},t.noConflict=function(){return e.EventEmitter=o,t},"function"==typeof define&&define.amd?define(function(){return t}):"object"==typeof module&&module.exports?module.exports=t:e.EventEmitter=t}(this||{});
8 | 


--------------------------------------------------------------------------------
/JS/005.Canvas/f2-canvas/lib/renderer.js:
--------------------------------------------------------------------------------
 1 | import EventEmitter from './EventEmitter.min.js'
 2 | 
 3 | const CAPITALIZED_ATTRS_MAP = {
 4 |   fontSize: 'FontSize',
 5 |   opacity: 'GlobalAlpha',
 6 |   lineDash: 'LineDash',
 7 |   textAlign: 'TextAlign',
 8 | };
 9 | 
10 | /**
11 |  * wxapp textAlign align 可选值为 left|center|right
12 |  * 标准canvas textAlign align 可选值为 left|center|right|start|end
13 |  */
14 | const TEXT_ALIGN_MAP = {
15 |   'start': 'left',
16 |   'end': 'right',
17 | };
18 | 
19 | export default class Renderer extends EventEmitter {
20 |   constructor(wxCtx) {
21 |     super();
22 |     const self = this;
23 |     self.ctx = wxCtx;
24 |     self.style = {}; // just mock
25 |     self._initContext(wxCtx);
26 |   }
27 | 
28 |   getContext(type) {
29 |     if (type === '2d') {
30 |       return this.ctx;
31 |     }
32 |   }
33 | 
34 |   _initContext(wxCtx) {
35 |     Object.keys(CAPITALIZED_ATTRS_MAP).map(style => {
36 |       Object.defineProperty(wxCtx, style, {
37 |         set: value => {
38 |           if (style == "textAlign") {
39 |             value = TEXT_ALIGN_MAP[value] ? TEXT_ALIGN_MAP[value] : value;
40 |           }
41 |           const name = 'set' + CAPITALIZED_ATTRS_MAP[style];
42 |           wxCtx[name](value);
43 |         }
44 |       });
45 |     });
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/JS/005.Canvas/main.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   methods : {
 3 |     // 黑白
 4 |     do1(){
 5 |       var cav = document.getElementById('myca')
 6 |       var ctx = cav.getContext('2d')
 7 |       let imageData = this.getImageData(cav,ctx)
 8 |       let pixels = imageData.data
 9 | 
10 |       //遍历像素点
11 |       for (let i=0; i<pixels.length; i+=4){
12 |         let r = pixels[i]
13 |         let g = pixels[i+1]
14 |         let b = pixels[i+2]
15 |         
16 |         //获取灰色
17 |         let gray = parseInt((r+g+b)/3)
18 | 
19 |         imageData.data[i] = gray
20 |         imageData.data[i+1] = gray
21 |         imageData.data[i+2] = gray
22 |       }
23 |       ctx.putImageData(imageData, 0,0)
24 |     },
25 | 
26 |     // 反向
27 |     do5(){
28 |       var cav = document.getElementById('myca')
29 |       var ctx = cav.getContext('2d')
30 |       let imageData = this.getImageData(cav,ctx)
31 |       let pixels = imageData.data
32 | 
33 |       //遍历像素点
34 |       for (let i=0; i<pixels.length; i+=4){
35 |         let r = pixels[i]
36 |         let g = pixels[i+1]
37 |         let b = pixels[i+2]
38 |         
39 |         imageData.data[i] = 255 - r
40 |         imageData.data[i+1] = 255 - g
41 |         imageData.data[i+2] = 255- b
42 |       }
43 |       ctx.putImageData(imageData, 0,0)
44 |     },
45 | 
46 |     getImageData(cav,ctx){
47 |       return ctx.getImageData(0,0,cav.width,cav.height)
48 |     },
49 | 
50 |     downloadIamge (imgsrc, name) { // 下载图片地址和图片名
51 |       let image = new Image()
52 |       // 解决跨域 Canvas 污染问题
53 |       image.setAttribute('crossOrigin', 'anonymous')
54 |       image.onload = function () {
55 |         let canvas = document.createElement('canvas')
56 |         canvas.width = image.width
57 |         canvas.height = image.height
58 |         let context = canvas.getContext('2d')
59 |         context.drawImage(image, 0, 0, image.width, image.height)
60 |         let url = canvas.toDataURL('image/jpg') // 得到图片的base64编码数据
61 |         let a = document.createElement('a') // 生成一个a元素
62 |         let event = new MouseEvent('click') // 创建一个单击事件
63 |         a.download = name || 'photo' // 设置图片名称
64 |         a.href = url // 将生成的URL设置为a.href属性
65 |         a.dispatchEvent(event) // 触发a的单击事件
66 |       }
67 |       image.src = imgsrc + '?time=' + new Date().getTime()
68 |     },
69 |   }
70 | }


--------------------------------------------------------------------------------
/JS/006.Animation/ripple-min.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Tween.js
  3 |  * t: current time（当前时间）；
  4 |  * b: beginning value（初始值）；
  5 |  * c: change in value（变化量）；
  6 |  * d: duration（持续时间）。
  7 |  * you can visit 'https://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html' to get effect
  8 | */
  9 | var Tween = {
 10 |     Linear: function(t, b, c, d) { 
 11 |         return c * t / d + b; 
 12 |     },
 13 |     Quad: {
 14 |         easeIn: function(t, b, c, d) {
 15 |             return c * (t /= d) * t + b;
 16 |         },
 17 |         easeOut: function(t, b, c, d) {
 18 |             return -c *(t /= d)*(t-2) + b;
 19 |         },
 20 |         easeInOut: function(t, b, c, d) {
 21 |             if ((t /= d / 2) < 1) return c / 2 * t * t + b;
 22 |             return -c / 2 * ((--t) * (t-2) - 1) + b;
 23 |         }
 24 |     },
 25 |     Cubic: {
 26 |         easeIn: function(t, b, c, d) {
 27 |             return c * (t /= d) * t * t + b;
 28 |         },
 29 |         easeOut: function(t, b, c, d) {
 30 |             return c * ((t = t/d - 1) * t * t + 1) + b;
 31 |         },
 32 |         easeInOut: function(t, b, c, d) {
 33 |             if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
 34 |             return c / 2*((t -= 2) * t * t + 2) + b;
 35 |         }
 36 |     },
 37 |     Quart: {
 38 |         easeIn: function(t, b, c, d) {
 39 |             return c * (t /= d) * t * t*t + b;
 40 |         },
 41 |         easeOut: function(t, b, c, d) {
 42 |             return -c * ((t = t/d - 1) * t * t*t - 1) + b;
 43 |         },
 44 |         easeInOut: function(t, b, c, d) {
 45 |             if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
 46 |             return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
 47 |         }
 48 |     },
 49 |     Quint: {
 50 |         easeIn: function(t, b, c, d) {
 51 |             return c * (t /= d) * t * t * t * t + b;
 52 |         },
 53 |         easeOut: function(t, b, c, d) {
 54 |             return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
 55 |         },
 56 |         easeInOut: function(t, b, c, d) {
 57 |             if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
 58 |             return c / 2*((t -= 2) * t * t * t * t + 2) + b;
 59 |         }
 60 |     },
 61 |     Sine: {
 62 |         easeIn: function(t, b, c, d) {
 63 |             return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 64 |         },
 65 |         easeOut: function(t, b, c, d) {
 66 |             return c * Math.sin(t/d * (Math.PI/2)) + b;
 67 |         },
 68 |         easeInOut: function(t, b, c, d) {
 69 |             return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
 70 |         }
 71 |     },
 72 |     Expo: {
 73 |         easeIn: function(t, b, c, d) {
 74 |             return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 75 |         },
 76 |         easeOut: function(t, b, c, d) {
 77 |             return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 78 |         },
 79 |         easeInOut: function(t, b, c, d) {
 80 |             if (t==0) return b;
 81 |             if (t==d) return b+c;
 82 |             if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
 83 |             return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
 84 |         }
 85 |     },
 86 |     Circ: {
 87 |         easeIn: function(t, b, c, d) {
 88 |             return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
 89 |         },
 90 |         easeOut: function(t, b, c, d) {
 91 |             return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
 92 |         },
 93 |         easeInOut: function(t, b, c, d) {
 94 |             if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
 95 |             return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
 96 |         }
 97 |     },
 98 |     Elastic: {
 99 |         easeIn: function(t, b, c, d, a, p) {
100 |             var s;
101 |             if (t==0) return b;
102 |             if ((t /= d) == 1) return b + c;
103 |             if (typeof p == "undefined") p = d * .3;
104 |             if (!a || a < Math.abs(c)) {
105 |                 s = p / 4;
106 |                 a = c;
107 |             } else {
108 |                 s = p / (2 * Math.PI) * Math.asin(c / a);
109 |             }
110 |             return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
111 |         },
112 |         easeOut: function(t, b, c, d, a, p) {
113 |             var s;
114 |             if (t==0) return b;
115 |             if ((t /= d) == 1) return b + c;
116 |             if (typeof p == "undefined") p = d * .3;
117 |             if (!a || a < Math.abs(c)) {
118 |                 a = c; 
119 |                 s = p / 4;
120 |             } else {
121 |                 s = p/(2*Math.PI) * Math.asin(c/a);
122 |             }
123 |             return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
124 |         },
125 |         easeInOut: function(t, b, c, d, a, p) {
126 |             var s;
127 |             if (t==0) return b;
128 |             if ((t /= d / 2) == 2) return b+c;
129 |             if (typeof p == "undefined") p = d * (.3 * 1.5);
130 |             if (!a || a < Math.abs(c)) {
131 |                 a = c; 
132 |                 s = p / 4;
133 |             } else {
134 |                 s = p / (2  *Math.PI) * Math.asin(c / a);
135 |             }
136 |             if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
137 |             return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
138 |         }
139 |     },
140 |     Back: {
141 |         easeIn: function(t, b, c, d, s) {
142 |             if (typeof s == "undefined") s = 1.70158;
143 |             return c * (t /= d) * t * ((s + 1) * t - s) + b;
144 |         },
145 |         easeOut: function(t, b, c, d, s) {
146 |             if (typeof s == "undefined") s = 1.70158;
147 |             return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
148 |         },
149 |         easeInOut: function(t, b, c, d, s) {
150 |             if (typeof s == "undefined") s = 1.70158; 
151 |             if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
152 |             return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
153 |         }
154 |     },
155 |     Bounce: {
156 |         easeIn: function(t, b, c, d) {
157 |             return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
158 |         },
159 |         easeOut: function(t, b, c, d) {
160 |             if ((t /= d) < (1 / 2.75)) {
161 |                 return c * (7.5625 * t * t) + b;
162 |             } else if (t < (2 / 2.75)) {
163 |                 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
164 |             } else if (t < (2.5 / 2.75)) {
165 |                 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
166 |             } else {
167 |                 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
168 |             }
169 |         },
170 |         easeInOut: function(t, b, c, d) {
171 |             if (t < d / 2) {
172 |                 return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
173 |             } else {
174 |                 return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
175 |             }
176 |         }
177 |     }
178 |   }
179 | Math.tween = Tween;
180 | 
181 | /**!
182 |  * @author zhangxinxu(.com)
183 |  * @description 基于SVG feDisplacementMap滤镜实现的任意元素点击水波效果
184 |  * @link http://www.zhangxinxu.com/wordpress/?p=6626
185 |  * @license MIT 保留这段注释和说明
186 |  */
187 | 
188 | var dataDisplacementImg = function () {
189 |     var t = document.createElement("canvas");
190 |     if (!t.getContext) {
191 |         return
192 |     }
193 |     var e = t.getContext("2d");
194 |     var r = 512,
195 |         a = 512,
196 |         i = 250,
197 |         n = 100;
198 |     var o = i - n;
199 |     t.width = r;
200 |     t.height = a;
201 |     var l = function (t, r, a, o) {
202 |         var l = 2 * Math.PI / o.length;
203 |         var f = 0;
204 |         var s = null;
205 |         var c = null,
206 |             u = null;
207 |         for (var d = 0; d < o.length; d++) {
208 |             c = o[d];
209 |             u = o[(d + 1) % o.length];
210 |             var p = t + Math.cos(f) * a;
211 |             var g = t + Math.cos(f + l) * a;
212 |             var v = r + Math.sin(f) * a;
213 |             var h = r + Math.sin(f + l) * a;
214 |             e.beginPath();
215 |             s = e.createLinearGradient(p, v, g, h);
216 |             s.addColorStop(0, c);
217 |             s.addColorStop(1, u);
218 |             e.strokeStyle = s;
219 |             e.arc(t, r, a, f, f + l);
220 |             e.lineWidth = i - n;
221 |             e.stroke();
222 |             e.closePath();
223 |             f += l
224 |         }
225 |     };
226 |     e.beginPath();
227 |     e.arc(r / 2, a / 2, i, 0, Math.PI * 2);
228 |     e.fillStyle = "#7f7f7f";
229 |     e.fill();
230 |     l(r / 2, a / 2, n + o / 2, ["rgb(255,0,0)", "rgb(0, 255, 0)", "rgb(255,0,0)", "rgb(0, 255, 0)"]);
231 |     var f = e.createRadialGradient(r / 2, a / 2, n, r / 2, a / 2, i);
232 |     f.addColorStop(0, "rgba(127,127,127,1)");
233 |     f.addColorStop(17 / o, "rgba(115,115,115,.8)");
234 |     f.addColorStop(25 / o, "rgba(115,115,115,0.1)");
235 |     f.addColorStop(28 / o, "rgba(115,115,115,0.1)");
236 |     f.addColorStop(37 / o, "rgba(115,104,104,.8)");
237 |     f.addColorStop(43 / o, "rgba(115,104,104,1)");
238 |     f.addColorStop(44 / o, "rgba(127,127,127,1)");
239 |     f.addColorStop(50 / o, "rgba(127,127,127,.6)");
240 |     f.addColorStop(54 / o, "rgba(127,127,127,0)");
241 |     f.addColorStop(61 / o, "rgba(0,0,0,0)");
242 |     f.addColorStop(67 / o, "rgba(0,0,0,1)");
243 |     f.addColorStop(78 / o, "rgba(0,0,0,1)");
244 |     f.addColorStop(88 / o, "rgba(0,0,0,0)");
245 |     f.addColorStop(100 / o, "rgba(0,0,0,0)");
246 |     f.addColorStop(108 / o, "rgba(0,0,0,1)");
247 |     f.addColorStop(117 / o, "rgba(0,0,0,1)");
248 |     f.addColorStop(136 / o, "rgba(0,0,0,0)");
249 |     f.addColorStop(1, "rgba(0,0,0,0)");
250 |     e.beginPath();
251 |     e.arc(r / 2, a / 2, i, 0, Math.PI * 2);
252 |     e.fillStyle = f;
253 |     e.fill();
254 |     return t.toDataURL()
255 | }();
256 | 
257 | if (!window.Tween) {
258 |     Tween = {}
259 | }
260 | 
261 | if (!Tween.Linear) {
262 |     Tween.Linear = function (t, e, r, a) {
263 |         return r * t / a + e
264 |     }
265 | }
266 | if (!Math.animation) {
267 |     Math.animation = function (t, e, r, a, i) {
268 |         var n = function (t) {
269 |             return typeof t == "undefined"
270 |         };
271 |         var o = function (t) {
272 |             return typeof t == "function"
273 |         };
274 |         var l = function (t) {
275 |             return typeof t == "number"
276 |         };
277 |         var f = function (t) {
278 |             return typeof t == "string"
279 |         };
280 |         var s = function (t) {
281 |             if (l(t)) {
282 |                 return t
283 |             } else if (f(t)) {
284 |                 if (/\d+m?s$/.test(t)) {
285 |                     if (/ms/.test(t)) {
286 |                         return 1 * t.replace("ms", "")
287 |                     }
288 |                     return 1e3 * t.replace("s", "")
289 |                 } else if (/^\d+$/.test(t)) {
290 |                     return +t
291 |                 }
292 |             }
293 |             return -1
294 |         };
295 |         var c = Tween;
296 |         var u = {
297 |             duration: 300,
298 |             easing: "Linear",
299 |             callback: function () {}
300 |         };
301 |         var d = function (t) {
302 |             if (o(t)) {
303 |                 u.callback = t
304 |             } else if (s(t) != -1) {
305 |                 u.duration = s(t)
306 |             } else if (f(t)) {
307 |                 u.easing = t
308 |             }
309 |         };
310 |         d(r);
311 |         d(a);
312 |         d(i);
313 |         if (!window.requestAnimationFrame) {
314 |             requestAnimationFrame = function (t) {
315 |                 return setTimeout(t, 17)
316 |             }
317 |         }
318 |         var p = 0;
319 |         var g = Math.ceil(u.duration / 17);
320 |         var v = null;
321 |         u.easing = u.easing.slice(0, 1).toUpperCase() + u.easing.slice(1);
322 |         var h = u.easing.split(".");
323 |         var m;
324 |         if (h.length == 1) {
325 |             m = c[h[0]]
326 |         } else if (h.length == 2) {
327 |             m = c[h[0]] && c[h[0]][h[1]]
328 |         }
329 |         var b = function () {
330 |             var r = m(p, t, e - t, g);
331 |             p++;
332 |             if (p <= g) {
333 |                 u.callback(r);
334 |                 v = requestAnimationFrame(b)
335 |             } else {
336 |                 u.callback(e, true)
337 |             }
338 |         };
339 |         b();
340 |         return function () {
341 |             return v
342 |         }
343 |     }
344 | }
345 | var E_ONLY = null;
346 | 
347 | var rippleEffect = function (t) {
348 |     if (!t || !history.pushState) {
349 |         return
350 |     }
351 |     var e = navigator.userAgent;
352 |     if (/Safari|iPhone/i.test(e) && /chrome/i.test(e) == false) {
353 |         window.console && console.info("Safari support but bug, so avoid!");
354 |         return
355 |     }
356 |     if (typeof t == "string") {
357 |         [].slice.call(document.querySelectorAll(t)).forEach(function (t) {
358 |             rippleEffect(t)
359 |         });
360 |         return
361 |     }
362 |     var r = "filterRipple";
363 |     var a = document.getElementById(r);
364 |     if (!a) {
365 |         document.body.insertAdjacentHTML("afterbegin",
366 |             '<svg style="position:absolute;height:0;clip:rect(0 0 0 0);"><defs><filter id="' + r +
367 |             '"><feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="' + dataDisplacementImg +
368 |             '" x="0" y="0" width="512" height="512" result="ripple"></feImage><feDisplacementMap xChannelSelector="G" yChannelSelector="R" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="0"></feDisplacementMap><feComposite operator="in" in2="ripple"></feComposite><feComposite in2="SourceGraphic"></feComposite></filter></defs></svg>'
369 |         )
370 |     }
371 |     var i = document.querySelector("#" + r + " feImage");
372 |     var n = document.querySelector("#" + r + " feDisplacementMap");
373 |     var o = null;
374 |     var l = null;
375 |     t.addEventListener("click", function (e) {
376 |         if (o) {
377 |             cancelAnimationFrame(o())
378 |         }
379 |         if (l) {
380 |             cancelAnimationFrame(l())
381 |         }
382 |         if (E_ONLY && E_ONLY != this) {
383 |             E_ONLY.style.filter = ""
384 |         }
385 |         t.style.filter = "url(#" + r + ")";
386 |         var a = t.offsetWidth;
387 |         var f = t.offsetHeight;
388 |         var s = e.clientX;
389 |         var c = e.clientY;
390 |         var u = t.getBoundingClientRect();
391 |         var d = u.left;
392 |         var p = u.top;
393 |         var g = s - d;
394 |         var v = c - p;
395 |         i.setAttribute("x", g);
396 |         i.setAttribute("y", v);
397 |         i.setAttribute("width", 0);
398 |         i.setAttribute("height", 0);
399 |         var h = Math.min(512, Math.max(a, f) * 2);
400 |         var m = 30 * h / 512;
401 |         var b = 2e3 * h / 512,
402 |             w = 2100 * h / 512;
403 |         l = Math.animation(m, 0, b, function (t) {
404 |             n.setAttribute("scale", t)
405 |         });
406 |         o = Math.animation(0, h, w, function (e, r) {
407 |             i.setAttribute("x", g - e / 2);
408 |             i.setAttribute("y", v - e / 2);
409 |             i.setAttribute("width", e);
410 |             i.setAttribute("height", e);
411 |             if (r) {
412 |                 t.style.filter = ""
413 |             }
414 |         });
415 |         E_ONLY = this
416 |     })
417 | };
418 | 
419 | export {
420 |     rippleEffect
421 | }


--------------------------------------------------------------------------------
/JS/007.window/index.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   methods : {
 3 |     // 判断是否 F11
 4 |     isFullscreenForNoScroll(){
 5 |       var explorer = window.navigator.userAgent.toLowerCase();
 6 |       if(explorer.indexOf('chrome')>0){//webkit
 7 |         if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
 8 |             // alert("全屏");
 9 |           return true
10 |         } else {
11 |             // alert("不全屏");
12 |           return false
13 |         }
14 |       }else{//IE 9+  fireFox
15 |         if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
16 |             // alert("全屏");
17 |           return true
18 |         } else {
19 |             // alert("不全屏");
20 |           return false
21 |         }
22 |       }
23 |     },
24 |   }
25 | }


--------------------------------------------------------------------------------
/JS/008.Array/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xrkffgg/Ktools/823a33c570659a76666421d6566d48dff2bceacd/JS/008.Array/index.js


--------------------------------------------------------------------------------
/JS/009.markdown/sort-api.js:
--------------------------------------------------------------------------------
 1 | // node ./sort-api
 2 | 
 3 | const fs = require('fs');
 4 | const { join } = require('path');
 5 | const glob = require('glob');
 6 | 
 7 | const docPaths = glob
 8 |   .sync('components/*/*.md', {
 9 |     ignore: '**/{__tests__,_util,version,index.tsx}',
10 |     cwd: join(process.cwd()),
11 |     dot: false,
12 |   })
13 |   .map(path => join(process.cwd(), path));
14 | 
15 | docPaths.forEach(path => {
16 |   const text = fs.readFileSync(path, 'utf-8');
17 |   const tables = [];
18 |   let table = false;
19 |   const lines = text.split('\n');
20 |   for (let index = 0; index < lines.length; index++) {
21 |     const line = lines[index];
22 |     if (line.startsWith('|')) {
23 |       if (!table) {
24 |         tables.push({ lines: [line], start: index });
25 |         table = true;
26 |       } else {
27 |         tables[tables.length - 1].lines.push(line);
28 |       }
29 |     } else if (table) {
30 |       table = false;
31 |     }
32 |   }
33 |   for (let index = 0; index < tables.length; index++) {
34 |     const { lines: tableLines, start } = tables[index];
35 |     if (tableLines.length > 3) {
36 |       const sortList = [];
37 |       sortList.push(tableLines.shift());
38 |       sortList.push(tableLines.shift());
39 |       sortList.push(...tableLines.sort());
40 |       for (let j = 0; j < sortList.length; j++) {
41 |         lines[start + j] = sortList[j];
42 |       }
43 |     }
44 |   }
45 |   fs.writeFileSync(path, lines.join('\n'));
46 | });
47 | 


--------------------------------------------------------------------------------
/JS/010.git/generate-authors.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | const simpleGit = require('simple-git/promise');
 4 | const _ = require('lodash');
 5 | 
 6 | const cwd = process.cwd();
 7 | const git = simpleGit(cwd);
 8 | 
 9 | const excludes = [
10 |   'users.noreply.github.com',
11 |   'gitter.im',
12 |   '.local',
13 |   'alibaba-inc.com',
14 |   'alipay.com',
15 |   'taobao.com',
16 | ];
17 | 
18 | async function execute() {
19 |   let logs = (await git.log()).all;
20 |   logs = _.remove(logs, ({ author_email: email }) => {
21 |     for (let i = 0; i < excludes.length; i++) {
22 |       const item = excludes[i];
23 |       if (email.indexOf(item) !== -1) {
24 |         return false;
25 |       }
26 |     }
27 |     return true;
28 |   });
29 |   logs = _.sortBy(_.unionBy(logs, 'author_email'), 'author_name');
30 |   fs.writeFileSync(
31 |     path.join(cwd, 'AUTHORS.txt'),
32 |     logs.map(item => `${item.author_name} <${item.author_email}>`).join('\n'),
33 |   );
34 | }
35 | 
36 | execute();
37 | 


--------------------------------------------------------------------------------
/JS/main.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   methods : {
3 |     
4 |   }
5 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019-present xrkffgg
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ktools
 2 | <!-- [![Kvue](https://img.shields.io/badge/%E2%9D%A4-Kvue-brightgreen?style=flat-square)](https://github.com/xrkffgg/Kvue)
 3 | [![Ktools](https://img.shields.io/badge/%E2%9D%A4-Ktools-blue?style=flat-square)](https://github.com/xrkffgg/Ktools)
 4 | [![Kme](https://img.shields.io/badge/%E2%9D%A4-Kme-orange?style=flat-square)](https://xrkffgg.github.io/)
 5 | [![Kplugins](https://img.shields.io/badge/%E2%9D%A4-Kplugins-blueviolet?style=flat-square)](https://github.com/xrkffgg/Kplugins)
 6 | [![Knotes](https://img.shields.io/badge/%E2%9D%A4-Knotes-yellow?style=flat-square)](https://github.com/xrkffgg/Knotes)
 7 | [![Khome](https://img.shields.io/badge/%E2%9D%A4-Khome-red?style=flat-square)](https://github.com/xrkffgg/Khome) -->
 8 | 
 9 | [![GitHub last commit](https://img.shields.io/github/last-commit/xrkffgg/Ktools.svg?color=red&style=flat-square)](https://github.com/xrkffgg/Ktools/commits/master)
10 | [![GitHub stars](https://img.shields.io/github/stars/xrkffgg/Ktools.svg?style=flat-square)](https://github.com/xrkffgg/Ktools/stargazers)
11 | [![GitHub issues](https://img.shields.io/github/issues/xrkffgg/Ktools.svg?style=flat-square)](https://github.com/xrkffgg/Ktools/issues)
12 | [![Badge](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg?style=flat-square)](https://996.icu/#/zh_CN)
13 | 
14 | - **后续 blog marks project 文件夹中内容 将存放于 [Knotes](https://xrkffgg.github.io/Knotes/) 项目中，本项目中文章将不再进行更新**
15 | 
16 | ~~记录工作、生活中使用到的各种工具，如JS、软件、文章等等。。。~~
17 | 
18 | 主要记录 工具类 JS + Demo 展示 + CSS
19 | 
20 | ## 目录
21 | 
22 | ### JS
23 | - 001.Date
24 | - 002.Excel
25 | - 003.Utils
26 | - 004.Num
27 | - 005.Canvas
28 | - 006.Animation
29 | - 007.window
30 | - 008.Array
31 | - 009.markdown
32 | - 010.git
33 | 
34 | ### Demo
35 | - camera-cut.html
36 | - WebSocket.html
37 | 
38 | ### CSS
39 | - csshake.css
40 | 
41 | ### Shell
42 | - git-history.sh
43 | 
44 | ## 求赞~~助~~😎
45 | 
46 | 欢迎 Star 欢迎 Fork
47 | 
48 | **欢迎关注：**
49 | - [GitHub](https://github.com/xrkffgg)
50 | - [掘 金](https://juejin.im/user/59c369496fb9a00a4843a3e2)
51 | - [简 书](https://www.jianshu.com/u/4ca4daac5890)
52 | 
53 | > **欢迎关注 我的：** [![GitHub](https://img.shields.io/badge/%E2%9D%A4-GitHub-lightgrey.svg?style=flat-square)](https://github.com/xrkffgg) [![juejin](https://img.shields.io/badge/%E2%9D%A4-%E6%8E%98%20%E9%87%91-blue.svg?style=flat-square)](https://juejin.im/user/59c369496fb9a00a4843a3e2) [![jianshu](https://img.shields.io/badge/%E2%9D%A4-%E7%AE%80%20%E4%B9%A6-orange.svg?style=flat-square)](https://www.jianshu.com/u/4ca4daac5890)
54 | 


--------------------------------------------------------------------------------
/Shell/git-history.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | YEAR="1990"
 4 | read -p "Github Username: " USERNAME
 5 | 
 6 | if [ -z "$USERNAME" ]
 7 | then
 8 |   exit 1
 9 | fi
10 | 
11 | mkdir $YEAR
12 | cd $YEAR
13 | git init
14 | echo "**$YEAR**" > README.md
15 | git add .
16 | GIT_AUTHOR_DATE="$YEAR-01-01T18:00:00" GIT_COMMITTER_DATE="$YEAR-01-01T18:00:00" git commit -m "$YEAR"
17 | git remote add origin https://github.com/$USERNAME/$YEAR.git
18 | git push -u origin master -f
19 | cd ..
20 | rm -rf $YEAR
21 | 
22 | echo
23 | echo Cool, check your profile now: https://github.com/$USERNAME
24 | 


--------------------------------------------------------------------------------