Question

我使用了

的字体功能

<i class="fa fa-circle-o text-red"></i>

它显示一个红色轮廓的圆圈。我希望它变成完整的红色圆圈并闪烁。

抱歉，我不是前端开发人员，所以我无法想到它的解决方案。

我试图做的是

.text-red
{
    background-color: red;
}

但这没有用。有人可以帮忙吗？谢谢

Answer 1

如上所述，您可以尝试css animation，已经使用background，您可以更改background-color，现在使用opacity create blinking effect .fa{ color:red; background:red; border-radius:50%; animation:op 3s ease infinite; } @keyframes op{ 0%{ opacity:0; } 50%{ opacity:1; } 100%{ opacity:0; } }如下所示，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-circle-o text-red"></i>

SELECT i.id
     , m.name
     , m.surname 
  FROM info i
  JOIN monterzy m
    ON i.monter1 = m.id;

Answer 2

您可以使用css规则background:red, border-radius:100%和color:red;

.text-red
{
  color:red;
  background: red;
  border-radius: 100%;
 
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<i class="fa fa-circle-o text-red"></i>

如何使字体 - 令人敬畏的辉光css

2 个答案: