在CSS中發光文字+文字輪廓（已經使用文字陰影發光）

所以我打了一下磚牆。我爲某些文字使用了關鍵幀發光，但我也需要應用文字大綱。這是可能的CSS？在CSS中發光文字+文字輪廓（已經使用文字陰影發光）

請參閱附件。文字是綠色的，所以找到一種顏色來補充它很好。我在Excel中演示了幾件事，發現了我喜歡的東西，但不確定如何在CSS中重新創建它。

下面是我想：

enter image description here http://www.flickr.com/photos/[email protected]/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; } 
     }

來源

2013-03-15 Lorenzo

我想你可以添加其他元素，並將其放置在第一位，並應用效果的新一？ – Jeff 2013-03-15 16:10:16

我會試試這個，好主意。 – Lorenzo 2013-03-15 16:14:08

只是爲了後人，這裏是我的反應都以上傑夫的建議：

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-27 19:51:38 Lorenzo

在CSS中發光文字+文字輪廓（已經使用文字陰影發光）

回答

相關問題