1

我在使用 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">█&lt;/span>
</div>

示例页面：Dreamler.se - 效果似乎在很短的时间内发展。

4

1 回答 1

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。
于 2012-12-06T20:51:13.800 回答