css实现快速抖动效果_CSS实战笔记(四) 抖动效果

1、悬浮抖动

(1)效果演示

(2)完整代码

.shape {

margin: 50px;

width: 200px;

height: 50px;

line-height: 50px;

text-align: center;

border: 1px solid black;

}

.shake:hover {

animation: shake 800ms ease-in-out;

}

@keyframes shake { /* 水平抖动，核心代码 */

10%, 90% { transform: translate3d(-1px, 0, 0); }

20%, 80% { transform: translate3d(+2px, 0, 0); }

30%, 70% { transform: translate3d(-4px, 0, 0); }

40%, 60% { transform: translate3d(+4px, 0, 0); }

50% { transform: translate3d(-4px, 0, 0); }

}

horizontal shake

2、点击抖动

(1)效果演示