【问题标题】:Blink a text inside div twice using css使用css将div内的文本闪烁两次
【发布时间】:2025-12-11 21:10:01
【问题描述】:

如何使用 css 每 5 秒闪烁两次文本

我有一个 div

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

我想使用 css 每 5 秒使该文本闪烁两次

我怎样才能做到这一点?

我试过了

how to make CSS animation to play every 10 seconds

但不能在 ie 中工作

我希望它可以在 ie 和 chrome 中工作

【问题讨论】:

    标签: css


    【解决方案1】:

    使用动画并调整如下属性:

    .blink {
      color:black;
      font-size:30px;
      font-weight:bold;
      animation:blink 2.5s linear infinite alternate 2.5s;
    
    }
    
    @keyframes blink {
      80% {
        color:black;
      }
      90% {
        color:red;
      }
      100% {
        color:black;
      }
    }
    <div class="blink">This text will blink twice every 5 seconds</div>

    【讨论】:

      【解决方案2】:

      #text {
        font-weight: bold;
        font-size: 20px;
        animation-name: blink;
        animation-duration: 5s;
         animation-iteration-count: infinite;
      }
      
      @keyframes blink {
          0% {color: pink}
          50% {color: black;}
          100% {color: pink;}
          }
      <div id="text">
        No more lights
      </div>

      您可以在此处查看 CSS3 动画示例/属性:https://www.w3schools.com/css/css3_animations.asp

      这里还有另一个 * 帖子: https://*.com/a/16012979/3366361

      【讨论】: