2

だから私は少しレンガの壁にぶつかった。一部のテキストにキーフレームグローを使用していますが、テキストのアウトラインも適用する必要があります。これはCSSで可能ですか？

添付をご参照ください。テキストは緑色なので、それをうまく補完する色を見つけるのは十分に困難でした。Excelでいくつかのデモを行い、気に入ったものを見つけましたが、CSSで再作成する方法がわかりません。

これが私が欲しいものです：

ここに画像の説明を入力してください http://www.flickr.com/photos/68814612@N05/8560198200/

そして、これは私がこれまでに使用しているコードです：

.metric {
    font-size: 240%;
    font-family:Arial Narrow;
    font-weight:700;
    color:#138200;

    text-shadow: -1px -1px 0 #92d050, 1px -1px 0 #92d050, -1px 1px 0 #92d050, 1px 1px 0 #92d050;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


@-webkit-keyframes glow {

    0% { text-shadow: 0 0 4px green; }
    50% {text-shadow: 0 0 20px rgba(19,130,0, 0.5), 0 0 20px rgba(19,130,0, 0.5), 0 0 20px rgba(19,130,0, 0.6),0 0 15px rgba(19,130,0, 0.6) ;}
    100% { text-shadow: 0 0 4px green; }
        }
4

1 に答える 1

2

後世のために、上記のジェフの提案に応えて私がしたことは次のとおりです。

http://jsfiddle.net/Osceana/cNYZa/

HTML：

<div id="Percentage">
    <div class="metric">98.3%</div>
    <div class="metric2">98.3%</div>
</div>

次に、CSSでキーフレームをグローに設定します。

.metric {
    position: absolute;

    font-size: 37pt;
    font-family:Segoe UI Light;
    color:#138200;

    text-shadow: -1px -1px 0 #92d050, 1px -1px 0 #92d050, -1px 1px 0 #92d050, 1px 1px 0 #92d050;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


@-webkit-keyframes glow {

    0% { text-shadow: 0 0 20px rgba(19,130,0, 0.7); }
    50% {text-shadow: 0 0 20px rgba(19,130,0, 0.7), 0 0 20px rgba(19,130,0, 1), 0 0 20px rgba(19,130,0, 1),0 0 20px rgba(19,130,0, 1),0 0 20px rgba(19,130,0, 1),0 0 20px rgba(19,130,0, 1), 0 0 30px rgba(19,130,0, 1);}
    100% { text-shadow: 0 0 20px rgba(19,130,0, 0.5)/*0 0 4px green*/; }
        }


.metric2 {
    position:absolute;

    font-size: 37pt;
    font-family:Segoe UI Light;
    color:#138200;

    text-shadow: -1px -1px 0 #92d050, 1px -1px 0 #92d050, -1px 1px 0 #92d050, 1px 1px 0 #92d050;

}
于 2013-03-27T19:51:38.670 に答える