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

Posted 2023-03-06

【中文标题】如何使用css无限期翻转两个表情符号

【英文标题】：How to flip two emojis indefinitely using 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>

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

【参考方案1】：

你可以使用伪元素：

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


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

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

【讨论】：

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

【参考方案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>

【讨论】：

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