css上下左右晃动效果

在网页实现动态效果是提高用户体验的常见方法之一。今天我们来学习一种用CSS实现上下左右晃动效果的方法。

/* 上下晃动 */
.box1 {
  animation: updown 0.5s infinite ease-in-out;
}
 
@keyframes updown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
 
/* 左右晃动 */
.box2 {
  animation: leftright 0.5s infinite ease-in-out;
}
 
@keyframes leftright {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
} 

上述代码展示了如何使用CSS中的animation和@keyframes属性分别实现上下和左右晃动效果。其中，animation规定了动画的名称、时间、重复次数和动画运行的速度曲线等属性，而@keyframes则用于定义关键帧和它们对应的样式。

想要实现更多的变化效果，可以在关键帧中定义更多的样式，比如改变元素的大小、透明度或颜色等，还可以通过添加多个关键帧使动画更加复杂丰富。

总之，利用CSS可以轻松实现各种动态效果，让网页更加生动有趣，为用户提供更好的体验。