即插即用,代码如下:
iframe:hover {
animation: iframe 800ms ease-in-out;
}
@keyframes iframe {
/* 水平抖动,核心代码 */
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);
}
}
注意:本文的iframe是控件名,使用时更换成自己要作用的控件即可,可是id名、类名。