如何在顶部闪烁的 div 上放置文本

【问题标题】：How do I put a text on top blinking div如何在顶部闪烁的 div 上放置文本
【发布时间】：2021-07-31 14:27:20
【问题描述】：

我有一个元素，我使用以下代码设置为每 1 秒无限期闪烁：

<Row>
   <Col xs="3">
      <div className="alerts-border"> //A Blinking Card code </div>
    </Col>
    <Col xs="3">
       <div> //Card code </div>
    </Col>
</Row>

// CSS:
.alerts-border {
  border: 1px #007BFE solid;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  50% { 
    border-color:#fff ; 
  }
}

我想在这个闪烁的 div 上放一些小文本，以便看起来像这样：

我已经使用这个创建了一个文本框：

<div class="boxed">
  This text is enclosed in a box.
</div>
.boxed {
  border: 1px solid #007BFE ;
}

但不知道如何将此 div 附加到其他 div 之上（正在闪烁的卡片）

【问题讨论】：

标签： html css reactjs typescript bootstrap-4

【解决方案1】：

给你...

您只将border-color: #fff 设置为@keyframes，这就是为什么只有边框在闪烁。如果您还想闪烁文本，还必须将opacity: 0 设置为@keyframes。

.boxed {
  border: 1px solid #007BFE;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
    border-color: #fff;
  }
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>

<body>

  <Row>
    <Col xs='3'>
    <div class='alerts-border'>
      <span class='boxed'>10% off on this product</span>
    </div>
    </Col>
    <Col xs='3'>
    <div> //Card code </div>
    </Col>
  </Row>

</body>

</html>

【讨论】：