如何在顶部闪烁的 div 上放置文本
Posted
技术标签:
【中文标题】如何在顶部闪烁的 div 上放置文本【英文标题】：How do I put a text on top blinking 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 之上（正在闪烁的卡片）
【问题讨论】：
【参考方案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>【讨论】：
以上是关于如何在顶部闪烁的 div 上放置文本的主要内容，如果未能解决你的问题，请参考以下文章