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 で散発的に再現できました。キャラクターが予想される領域をわずかにオーバーフローし、外側の領域が適切に再描画されないという問題があるようです。正方形の左側の青が最も理にかなっています。テキストをハイライトしてからハイライト (青) をクリアすると、左側に 1 ピクセルの青い線が残ります。また、単一の長方形の文字を強調表示すると、左右で約 1px の強調表示が失われることに注意してください。

私が試したことの1つは、テキストの周りに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;
}

これで問題は解決したように見えますが、これまで見てきたように、問題は散発的であるため、私のテストを回避しただけかもしれません。

そうしないと、次の 3 つのオプションのいずれかで行き詰まる可能性があります。

  • 少し小さい別の文字 (おそらく別のフォントを使用) を見つける
  • jQuery を使用してキャラクターをアニメーション化する
  • 他のすべてが失敗した場合は、gif を使用します。
于 2012-12-06T20:51:13.800 に答える