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中偶尔重现它。看起来这是一个问题，字符溢出预期区域非常轻微，外面的区域没有正确重新绘制。方块左侧的蓝色最有意义，当您突出显示文本然后清除突出显示（蓝色）时，左侧会留下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为角色设置动画
如果所有其他方法都失败了，请使用gif。

在css动画字体的奇怪的蓝色和橙色边缘

1 个答案: