[分享]css两个盒子分别动画

如果你想让两个CSS盒子分别显示不同的动画，可使用CSS中的animation属性。首先，在CSS文件中定义两个不同的动画效果。例如： .box1 { animation: spin 2s linea...

如果你想让两个CSS盒子分别显示不同的动画，可使用CSS中的animation属性。首先，在CSS文件中定义两个不同的动画效果。例如：

.box1 {
  animation: spin 2s linear infinite;
}

.box2 {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(0, -20px) scale(1.2);
  }
} 

上述代码定义了两个动画，一个是box1的旋转效果，持续2秒，并且无限循环；另一个是box2的弹跳效果，持续1秒，并且无限循环。通过定义不同的关键帧，实现了不同的动画效果。

接下来，为不同的盒子分别添加对应的class：

<div class="box1"></div>
<div class="box2"></div> 

此时，两个盒子分别会显示不同的动画效果。

最后，可以根据需要进行样式美化，例如修改盒子的大小、颜色等。