html - css 动画字体上奇怪的蓝色和橙色边缘

Question

我在使用 CSS3 制作动画的完整条形符号中看到了一些奇怪的行为。在某些浏览器中，该符号沿其两侧形成蓝色和橙色边缘。一直无法弄清楚原因。

CSS:

/* blink cursor*/
span#textblink {
color: #fff;
font-family: "Lucida Console";
animation: colorPulse 0.2s infinite alternate;  
-moz-animation: colorPulse 0.2s infinite alternate; 
-webkit-animation: colorPulse 0.2s infinite alternate;
-o-animation: colorPulse 0.2s infinite alternate;
}

HTML:

<div id="linkbg">
<a href="developers.html" id="dev-link">DreaMLer::Wanted.developers()</a>
<span id="textblink">█</span>
</div>

示例页面:Dreamler.se - 效果似乎会在短时间内产生。

Answer 1

哦，讽刺。

在我看来，这真的像是一个浏览器错误。我能够在 Chrome 23.0.1271.95 m 中偶尔重现它。看起来真的是一个问题， Angular 色稍微溢出了预期的区域，而外面的区域没有被正确地重新粉刷。正方形左侧的蓝色最有意义，当您突出显示文本然后清除突出显示(蓝色)时，左侧会留下一条 1px 的蓝线。另请注意，当您突出显示单个矩形字符时，突出显示会在左侧和右侧遗漏大约 1px。

我尝试的一件事是在文本周围添加一个 1px 的黑色边框:

span#textblink {
    color: #FFF;
    animation: colorPulse 0.2s infinite alternate;  
    -moz-animation: colorPulse 0.2s infinite alternate; 
    -webkit-animation: colorPulse 0.2s infinite alternate;
    -o-animation: colorPulse 0.2s infinite alternate;

    border: 1px solid black;
}

这似乎解决了问题，但正如我们所见，该问题是偶发的，所以它可能刚刚避开了我的测试。

否则，您可能会陷入以下三个选项之一:

• 寻找另一个稍小的字符(可能使用不同的字体)
• 使用 jQuery 为 Angular 色制作动画
• 如果一切都失败了，使用 gif。