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

只是为了后代，这是我对上述 Jeff 提议的回应：

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 回答