[分享]css两个盒子轮流隐藏

CSS中有许多隐藏元素的方法，今天我们来谈一个比较有趣的例子，就是如何让两个盒子轮流隐藏。下面是一个基本的HTML结构：Box 1 Box 2 我们可以使用CSS中的display: none;属性来...

CSS中有许多隐藏元素的方法，今天我们来谈一个比较有趣的例子，就是如何让两个盒子轮流隐藏。

下面是一个基本的HTML结构：

<div class="box-1">Box 1</div>
<div class="box-2">Box 2</div> 

我们可以使用CSS中的display: none;属性来隐藏元素。但是这样做不是我们想要的，因为它会将所有的元素都隐藏起来。我们需要一种方法来让元素轮流隐藏，这样它们会交替出现。

那么我们如何实现这个效果呢？让我们来看下面的CSS代码：

.box-1 {
  animation-name: hide-1;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.box-2 {
  animation-name: hide-2;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes hide-1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hide-2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} 

首先，我们定义了两个动画hide-1和hide-2，它们将分别应用于.box-1和.box-2元素。它们的持续时间为3秒，缓动函数为ease，循环次数为infinite，这意味着它们将永远轮流播放。

接下来，我们定义了两个关键帧，分别为hide-1和hide-2。这些关键帧定义了每个元素在动画不同时间点上的透明度。例如，在hide-1动画中，当时间为0%时，元素的透明度为1，当时间为50%时，元素的透明度为0，在100%时，元素的透明度再次变为1。

这样就做完了！现在您可以看到两个盒子正在轮流出现和隐藏。这种伎俩实际上还可以扩展到更多的盒子，您只需要为每个盒子定义一个动画和关键帧即可。