[分享]css3抖动控制效果

CSS3抖动控制效果是网页设计中经常使用的一种技术，可以让页面元素在特定的条件下产生抖动效果，增加页面的动态效果，让用户的视觉体验更加丰富。.element{ : relative; left:0; ...

CSS3抖动控制效果是网页设计中经常使用的一种技术，可以让页面元素在特定的条件下产生抖动效果，增加页面的动态效果，让用户的视觉体验更加丰富。

.element{
  position: relative;
  left:0;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@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);
  }
} 

在上述代码中，我们使用了CSS3的动画效果实现了元素抖动的效果，使用关键帧（@keyframes）定义了不同时间点的元素位置，通过animation属性使元素运动起来。其中，cubic-bezier是一个贝塞尔曲线函数，决定了元素变化的速率和强度，可以根据不同需要自行调整。

通过CSS3的抖动控制效果，我们可以让按钮、标签等页面元素在用户交互时产生反馈，增加页面的互动性和用户体验。