css实现悬浮时图标抖动效果

例如，利用css实现鼠标悬浮时热线电话电话标识晃动效果

效果如下图所示

HTML代码部分

给予一个 i 标签，放置小图标

<div class="phone">
      <i></i>
</div>

css代码部分

首先，为电话小图标定好宽高以及位置，可以根据图片具体情况加以改变

.phone i {
    display: inline-block;
    width: 27px;
    height: 31px;
    background: url(../img/icon.png) -281px top no-repeat;
    position: absolute;
    top: 11px;
    left: 32px;
}

然后，实现鼠标悬浮到上面时的晃动效果

.phonee:hover i {
    animation: mybox 0.15s 2;
}

@keyframes mybox {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(35deg);
    }
}

结束