如何使用css无限期翻转两个表情符号答案

【问题标题】：How to flip two emojis indefinitely using css如何使用css无限期翻转两个表情符号
【发布时间】：2021-08-05 03:01:14
【问题描述】：

我有一个带有两个表情符号的文本 ??????????
我想用 css 翻转一个表情符号。

当显示第一个表情符号时，我想隐藏第二个表情符号。所以他们有点无限期地互相取代。

我在这里找到了一个很好的例子，如何制作文字blink

    .blink {
      animation: blinker 1s step-start infinite;
    }
    
    @keyframes blinker {
      50% {
        opacity: 0;
      }
    }

    
    <div class="blink">????</div>

那么，当第一个表情被隐藏时，你将如何显示第二个表情呢？

【问题讨论】：

标签： javascript html css

【解决方案1】：

你可以使用伪元素：

.blink::before {
  content: "?";
  animation: blinker 1s linear infinite alternate;
}

@keyframes blinker {
  0% {
    content: "?";
  }
  50% {
    opacity: 0%;
  }
  100% {
    content: "?";
  }
}

&lt;div class="blink"&gt;&lt;/div&gt;

【讨论】：

是否可以在两者之间添加一个简单的过渡？

【解决方案2】：

.emoji-cont {
  position: relative;
}

.blink, .blink-2 {
    position: absolute;
}

.blink {
  animation: blinker 1s infinite;
}

.blink-2 {
  animation: blinker 1s .5s infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="emoji-cont">
  <div class="blink">?</div>
  <div class="blink-2">?</div>
</div>

【讨论】：

是否可以在两者之间添加一个简单的过渡？