css晃动图标的样式

正文开始

<style>
@-webkit-keyframes shake {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}
.onlineCls {
      color: #333;
      padding: 0 20px;
      font-size: 16px;
      position: relative;
    }
.onlineCls   b {
        width: 32px;
        position: absolute;
        right: -10px;
        top: 10px;
        animation: shake 1s 0.15s linear infinite;
        -moz-animation: shake 1s 0.15s linear infinite; /* Firefox */
        -webkit-animation: shake 1s 0.15s linear infinite; /* Safari and Chrome */
        -o-animation: shake 1s 0.15s linear infinite; /* Opera */
}

 </style>

 <a class="onlineCls">在线计价 <b>摇摇晃摇</b> </a>

查看效果

正文结束

Flex 布局教程:语法篇 背景5个几何图形缓慢移动的样式