css实现快速抖动效果_纯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 }