纯html+css3鼠标经过左右晃动特效

1、新建html文档。

2、书写hmtl代码。<div class="zzz">鼠标放上来</div>

3、书写css代码。

<style>

.zzz {

margin: 100px auto;

width: 100px;

text-align: center;

    height: 40px;

    line-height: 40px;

    border: 1px solid #CCC;

    border-radius: 2px;

}

.zzz:hover {

animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;

transform: translate3d(0, 0, 0);

backface-visibility: hidden;

perspective: 1000px;

}

@keyframes shake {

10%, 90% {

transform: translate3d(-1px, 0, 0);

}

20%, 80% {

transform: translate3d(2px, 0, 0);

}

30%, 50%, 70% {

transform: translate3d(-4px, 0, 0);

}

40%, 60% {

transform: translate3d(4px, 0, 0);

}

}

</style>

4、代码整体结构。

5、查看效果。