纯css抖动效果

 ?1 .shake{ ?2 ????width: 120px; ?3 ????height: 33px; ?4 ????border-radius: 66px; ?5 ????background-color: #00ff00; ?6 ????border: 0; ?7 ????color: #fff; ?8 ????font-weight: bold; ?9 } 10 /* shake 按钮抖动 */ 11 .shake:hover { 12 ??-webkit-animation-name: shake-slow; 13 ??-ms-animation-name: shake-slow; 14 ??animation-name: shake-slow; 15 ??-webkit-animation-duration: 5s; 16 ??-ms-animation-duration: 5s; 17 ??animation-duration: 5s; 18 ??-webkit-animation-iteration-count: infinite; 19 ??-ms-animation-iteration-count: infinite; 20 ??animation-iteration-count: infinite; 21 ??-webkit-animation-timing-function: ease-in-out; 22 ??-ms-animation-timing-function: ease-in-out; 23 ??animation-timing-function: ease-in-out; 24 ??-webkit-animation-delay: 0s; 25 ??-ms-animation-delay: 0s; 26 ??animation-delay: 0s; 27 ??-webkit-animation-play-state: running; 28 ??-ms-animation-play-state: running; 29 ??animation-play-state: running; 30 } 31 ?32 @-webkit-keyframes shake-slow { 33 ??0% { 34 ????-webkit-transform: translate(0px, 0px) rotate(0deg); 35 ??} 36 ??2% { 37 ????-webkit-transform: translate(-1px, 8px) rotate(1.5deg); 38 ??} 39 ??4% { 40 ????-webkit-transform: translate(7px, 0px) rotate(-0.5deg); 41 ??} 42 ??6% { 43 ????-webkit-transform: translate(8px, 8px) rotate(-3.5deg); 44 ??} 45 ??8% { 46 ????-webkit-transform: translate(-4px, -3px) rotate(-1.5deg); 47 ??} 48 ??10% { 49 ????-webkit-transform: translate(5px, 0px) rotate(-2.5deg); 50 ??} 51 ??12% { 52 ????-webkit-transform: translate(-10px, -3px) rotate(-3.5deg); 53 ??} 54 ??14% { 55 ????-webkit-transform: translate(5px, 7px) rotate(2.5deg); 56 ??} 57 ??16% { 58 ????-webkit-transform: translate(8px, -8px) rotate(-1.5deg); 59 ??} 60 ??18% { 61 ????-webkit-transform: translate(9px, -6px) rotate(-3.5deg); 62 ??} 63 ??20% { 64 ????-webkit-transform: translate(3px, 1px) rotate(-0.5deg); 65 ??} 66 ??22% { 67 ????-webkit-transform: translate(6px, 8px) rotate(-2.5deg); 68 ??} 69 ??24% { 70 ????-webkit-transform: translate(-8px, -1px) rotate(2.5deg); 71 ??} 72 ??26% { 73 ????-webkit-transform: translate(7px, -10px) rotate(0.5deg); 74 ??} 75 ??28% { 76 ????-webkit-transform: translate(7px, -4px) rotate(-3.5deg); 77 ??} 78 ??30% { 79 ????-webkit-transform: translate(-2px, -6px) rotate(-1.5deg); 80 ??} 81 ??32% { 82 ????-webkit-transform: translate(-1px, 0px) rotate(2.5deg); 83 ??} 84 ??34% { 85 ????-webkit-transform: translate(6px, 2px) rotate(-0.5deg); 86 ??} 87 ??36% { 88 ????-webkit-transform: translate(2px, 7px) rotate(1.5deg); 89 ??} 90 ??38% { 91 ????-webkit-transform: translate(2px, -9px) rotate(1.5deg); 92 ??} 93 ??40% { 94 ????-webkit-transform: translate(-5px, -1px) rotate(-0.5deg); 95 ??} 96 ??42% { 97 ????-webkit-transform: translate(-8px, 2px) rotate(-0.5deg); 98 ??} 99 ??44% {100 ????-webkit-transform: translate(-4px, 3px) rotate(0.5deg);101 ??}102 ??46% {103 ????-webkit-transform: translate(-10px, -2px) rotate(-0.5deg);104 ??}105 ??48% {106 ????-webkit-transform: translate(1px, 9px) rotate(1.5deg);107 ??}108 ??50% {109 ????-webkit-transform: translate(6px, 7px) rotate(1.5deg);110 ??}111 ??52% {112 ????-webkit-transform: translate(-8px, 4px) rotate(0.5deg);113 ??}114 ??54% {115 ????-webkit-transform: translate(6px, -8px) rotate(-2.5deg);116 ??}117 ??56% {118 ????-webkit-transform: translate(2px, -9px) rotate(-2.5deg);119 ??}120 ??58% {121 ????-webkit-transform: translate(-2px, -9px) rotate(0.5deg);122 ??}123 ??60% {124 ????-webkit-transform: translate(2px, 7px) rotate(-0.5deg);125 ??}126 ??62% {127 ????-webkit-transform: translate(0px, 0px) rotate(-1.5deg);128 ??}129 ??64% {130 ????-webkit-transform: translate(-9px, -4px) rotate(-3.5deg);131 ??}132 ??66% {133 ????-webkit-transform: translate(6px, -6px) rotate(0.5deg);134 ??}135 ??68% {136 ????-webkit-transform: translate(0px, -7px) rotate(-2.5deg);137 ??}138 ??70% {139 ????-webkit-transform: translate(-10px, 1px) rotate(1.5deg);140 ??}141 ??72% {142 ????-webkit-transform: translate(-7px, 9px) rotate(2.5deg);143 ??}144 ??74% {145 ????-webkit-transform: translate(2px, -6px) rotate(-0.5deg);146 ??}147 ??76% {148 ????-webkit-transform: translate(5px, 1px) rotate(-0.5deg);149 ??}150 ??78% {151 ????-webkit-transform: translate(-1px, 5px) rotate(2.5deg);152 ??}153 ??80% {154 ????-webkit-transform: translate(3px, 7px) rotate(2.5deg);155 ??}156 ??82% {157 ????-webkit-transform: translate(-6px, -7px) rotate(-0.5deg);158 ??}159 ??84% {160 ????-webkit-transform: translate(-8px, 8px) rotate(-2.5deg);161 ??}162 ??86% {163 ????-webkit-transform: translate(8px, 3px) rotate(-2.5deg);164 ??}165 ??88% {166 ????-webkit-transform: translate(-8px, 3px) rotate(-1.5deg);167 ??}168 ??90% {169 ????-webkit-transform: translate(-7px, -4px) rotate(-3.5deg);170 ??}171 ??92% {172 ????-webkit-transform: translate(-8px, 4px) rotate(2.5deg);173 ??}174 ??94% {175 ????-webkit-transform: translate(-6px, -6px) rotate(-3.5deg);176 ??}177 ??96% {178 ????-webkit-transform: translate(-3px, 2px) rotate(-3.5deg);179 ??}180 ??98% {181 ????-webkit-transform: translate(2px, 1px) rotate(-0.5deg);182 ??}183 }184 @-ms-keyframes shake-slow {185 ??0% {186 ????-ms-transform: translate(0px, 0px) rotate(0deg);187 ??}188 ??2% {189 ????-ms-transform: translate(-9px, 1px) rotate(-1.5deg);190 ??}191 ??4% {192 ????-ms-transform: translate(-10px, -1px) rotate(-3.5deg);193 ??}194 ??6% {195 ????-ms-transform: translate(6px, 2px) rotate(-1.5deg);196 ??}197 ??8% {198 ????-ms-transform: translate(-3px, -6px) rotate(-1.5deg);199 ??}200 ??10% {201 ????-ms-transform: translate(-10px, -3px) rotate(-0.5deg);202 ??}203 ??12% {204 ????-ms-transform: translate(-8px, 6px) rotate(-2.5deg);205 ??}206 ??14% {207 ????-ms-transform: translate(7px, 5px) rotate(-1.5deg);208 ??}209 ??16% {210 ????-ms-transform: translate(2px, 2px) rotate(1.5deg);211 ??}212 ??18% {213 ????-ms-transform: translate(8px, -2px) rotate(-3.5deg);214 ??}215 ??20% {216 ????-ms-transform: translate(-9px, 3px) rotate(-3.5deg);217 ??}218 ??22% {219 ????-ms-transform: translate(8px, -4px) rotate(-1.5deg);220 ??}221 ??24% {222 ????-ms-transform: translate(-1px, -7px) rotate(2.5deg);223 ??}224 ??26% {225 ????-ms-transform: translate(9px, 9px) rotate(-0.5deg);226 ??}227 ??28% {228 ????-ms-transform: translate(9px, -4px) rotate(-3.5deg);229 ??}230 ??30% {231 ????-ms-transform: translate(6px, -7px) rotate(-0.5deg);232 ??}233 ??32% {234 ????-ms-transform: translate(9px, 2px) rotate(1.5deg);235 ??}236 ??34% {237 ????-ms-transform: translate(3px, -9px) rotate(2.5deg);238 ??}239 ??36% {240 ????-ms-transform: translate(-6px, -4px) rotate(2.5deg);241 ??}242 ??38% {243 ????-ms-transform: translate(-5px, -9px) rotate(0.5deg);244 ??}245 ??40% {246 ????-ms-transform: translate(6px, 9px) rotate(-2.5deg);247 ??}248 ??42% {249 ????-ms-transform: translate(5px, -5px) rotate(0.5deg);250 ??}251 ??44% {252 ????-ms-transform: translate(8px, 5px) rotate(-3.5deg);253 ??}254 ??46% {255 ????-ms-transform: translate(-2px, 9px) rotate(1.5deg);256 ??}257 ??48% {258 ????-ms-transform: translate(-10px, -5px) rotate(-2.5deg);259 ??}260 ??50% {261 ????-ms-transform: translate(8px, -1px) rotate(-3.5deg);262 ??}263 ??52% {264 ????-ms-transform: translate(-5px, -7px) rotate(2.5deg);265 ??}266 ??54% {267 ????-ms-transform: translate(7px, 0px) rotate(2.5deg);268 ??}269 ??56% {270 ????-ms-transform: translate(-5px, -1px) rotate(-0.5deg);271 ??}272 ??58% {273 ????-ms-transform: translate(0px, -4px) rotate(-3.5deg);274 ??}275 ??60% {276 ????-ms-transform: translate(-10px, 2px) rotate(2.5deg);277 ??}278 ??62% {279 ????-ms-transform: translate(9px, 8px) rotate(0.5deg);280 ??}281 ??64% {282 ????-ms-transform: translate(-4px, -4px) rotate(-1.5deg);283 ??}284 ??66% {285 ????-ms-transform: translate(-1px, -9px) rotate(-0.5deg);286 ??}287 ??68% {288 ????-ms-transform: translate(-6px, -9px) rotate(-2.5deg);289 ??}290 ??70% {291 ????-ms-transform: translate(-6px, -8px) rotate(-1.5deg);292 ??}293 ??72% {294 ????-ms-transform: translate(-2px, -3px) rotate(-2.5deg);295 ??}296 ??74% {297 ????-ms-transform: translate(-8px, 1px) rotate(-0.5deg);298 ??}299 ??76% {300 ????-ms-transform: translate(-7px, 7px) rotate(2.5deg);301 ??}302 ??78% {303 ????-ms-transform: translate(7px, 2px) rotate(-3.5deg);304 ??}305 ??80% {306 ????-ms-transform: translate(-10px, -4px) rotate(-0.5deg);307 ??}308 ??82% {309 ????-ms-transform: translate(2px, -9px) rotate(1.5deg);310 ??}311 ??84% {312 ????-ms-transform: translate(3px, 5px) rotate(1.5deg);313 ??}314 ??86% {315 ????-ms-transform: translate(5px, 2px) rotate(2.5deg);316 ??}317 ??88% {318 ????-ms-transform: translate(-5px, -1px) rotate(-1.5deg);319 ??}320 ??90% {321 ????-ms-transform: translate(-1px, -9px) rotate(1.5deg);322 ??}323 ??92% {324 ????-ms-transform: translate(8px, -6px) rotate(-3.5deg);325 ??}326 ??94% {327 ????-ms-transform: translate(7px, -9px) rotate(-2.5deg);328 ??}329 ??96% {330 ????-ms-transform: translate(4px, -5px) rotate(2.5deg);331 ??}332 ??98% {333 ????-ms-transform: translate(8px, 0px) rotate(-3.5deg);334 ??}335 }336 @keyframes shake-slow {337 ??0% {338 ????transform: translate(0px, 0px) rotate(0deg);339 ??}340 ??2% {341 ????transform: translate(-6px, -8px) rotate(2.5deg);342 ??}343 ??4% {344 ????transform: translate(3px, -9px) rotate(-0.5deg);345 ??}346 ??6% {347 ????transform: translate(3px, -8px) rotate(2.5deg);348 ??}349 ??8% {350 ????transform: translate(0px, 5px) rotate(0.5deg);351 ??}352 ??10% {353 ????transform: translate(3px, 2px) rotate(0.5deg);354 ??}355 ??12% {356 ????transform: translate(8px, 0px) rotate(0.5deg);357 ??}358 ??14% {359 ????transform: translate(4px, 7px) rotate(-3.5deg);360 ??}361 ??16% {362 ????transform: translate(-4px, 0px) rotate(-0.5deg);363 ??}364 ??18% {365 ????transform: translate(1px, 3px) rotate(-1.5deg);366 ??}367 ??20% {368 ????transform: translate(-8px, -1px) rotate(-3.5deg);369 ??}370 ??22% {371 ????transform: translate(5px, 9px) rotate(2.5deg);372 ??}373 ??24% {374 ????transform: translate(-9px, -10px) rotate(-2.5deg);375 ??}376 ??26% {377 ????transform: translate(0px, 7px) rotate(-1.5deg);378 ??}379 ??28% {380 ????transform: translate(-10px, 7px) rotate(2.5deg);381 ??}382 ??30% {383 ????transform: translate(8px, -7px) rotate(-1.5deg);384 ??}385 ??32% {386 ????transform: translate(0px, -8px) rotate(-0.5deg);387 ??}388 ??34% {389 ????transform: translate(9px, 7px) rotate(-0.5deg);390 ??}391 ??36% {392 ????transform: translate(-7px, 6px) rotate(0.5deg);393 ??}394 ??38% {395 ????transform: translate(8px, -10px) rotate(-0.5deg);396 ??}397 ??40% {398 ????transform: translate(8px, 0px) rotate(0.5deg);399 ??}400 ??42% {401 ????transform: translate(0px, -2px) rotate(1.5deg);402 ??}403 ??44% {404 ????transform: translate(5px, -2px) rotate(-0.5deg);405 ??}406 ??46% {407 ????transform: translate(1px, -10px) rotate(-2.5deg);408 ??}409 ??48% {410 ????transform: translate(4px, -1px) rotate(2.5deg);411 ??}412 ??50% {413 ????transform: translate(-5px, -4px) rotate(2.5deg);414 ??}415 ??52% {416 ????transform: translate(3px, 2px) rotate(-3.5deg);417 ??}418 ??54% {419 ????transform: translate(1px, -6px) rotate(-0.5deg);420 ??}421 ??56% {422 ????transform: translate(-3px, -4px) rotate(-0.5deg);423 ??}424 ??58% {425 ????transform: translate(-10px, -10px) rotate(2.5deg);426 ??}427 ??60% {428 ????transform: translate(8px, 7px) rotate(-3.5deg);429 ??}430 ??62% {431 ????transform: translate(9px, -6px) rotate(-3.5deg);432 ??}433 ??64% {434 ????transform: translate(-5px, 8px) rotate(-0.5deg);435 ??}436 ??66% {437 ????transform: translate(1px, -3px) rotate(0.5deg);438 ??}439 ??68% {440 ????transform: translate(-6px, 9px) rotate(1.5deg);441 ??}442 ??70% {443 ????transform: translate(-5px, 8px) rotate(-1.5deg);444 ??}445 ??72% {446 ????transform: translate(-10px, -2px) rotate(2.5deg);447 ??}448 ??74% {449 ????transform: translate(0px, -4px) rotate(1.5deg);450 ??}451 ??76% {452 ????transform: translate(-2px, -5px) rotate(0.5deg);453 ??}454 ??78% {455 ????transform: translate(-2px, 9px) rotate(-3.5deg);456 ??}457 ??80% {458 ????transform: translate(7px, 4px) rotate(-3.5deg);459 ??}460 ??82% {461 ????transform: translate(-1px, -4px) rotate(-1.5deg);462 ??}463 ??84% {464 ????transform: translate(3px, -6px) rotate(0.5deg);465 ??}466 ??86% {467 ????transform: translate(7px, -8px) rotate(-1.5deg);468 ??}469 ??88% {470 ????transform: translate(4px, -9px) rotate(1.5deg);471 ??}472 ??90% {473 ????transform: translate(1px, -6px) rotate(2.5deg);474 ??}475 ??92% {476 ????transform: translate(-8px, -1px) rotate(-1.5deg);477 ??}478 ??94% {479 ????transform: translate(-4px, -1px) rotate(0.5deg);480 ??}481 ??96% {482 ????transform: translate(-6px, 9px) rotate(1.5deg);483 ??}484 ??98% {485 ????transform: translate(7px, 4px) rotate(-0.5deg);486 ??}487 }