SVG霓虹燈效果

效果圖如下：

 

就像是一圈圈螞蟻在它身上爬。 。 。 。 。 emmmmm奇特的比喻

fill:none;可以讓圖形不被填充，如果不添加這一屬性，則預設填充顏色是black，這個效果

發現stroke這一系列屬性都很有意思啊，填充啊透明度和stroke-linecap，但是這個效果用的最多的還是stroke-dasharray和stroke-dashoffset。

• stroke-miterlimit 表示描邊相交（銳角）的表現方式。預設大小是4. 什麼斜角轉斜面的角度損耗之類的意思，值越大，損耗越小。具體乾嘛的，我自己也不確定。大家可查查其他資料。

• stroke-dasharray 表示虛線描邊。可選值為：none, 95c67b0134a361fe5a4d132d6fc3c1ee, inherit. 其中，none表示不是虛線;458d221d2512d0f1e3e00c09c988f0c2為逗號或空格分隔的數值清單。表示各個虛線端的長度。可以是固定的長度值，也可以是百分比值；inherit表繼承。

• stroke-dashoffset 表示虛線的起始偏移。可選值為：42c97a047d75abc12b9b351eb8562711, d82af2074b26fcfe177e947839b5d381, inherit. 百分比值，長度值，繼承。

• stroke-opacity 表示描邊透明度。預設是1.

特別佩服作者列舉的一個生動形象的例子：

一根火腿腸12厘米，要在上面畫虛線，虛線間隔有15厘米，如果沒有dashoffset，則火腿腸前面15厘米會被辣椒醬覆蓋！實際上只有12厘米，因此，我們看到的是整個火腿腸都有辣椒醬。現在，dashoffset也是15厘米，也就是虛線要往後偏移15厘米，結果，辣椒醬要抹在火腿腸之外，也就是火腿腸上什麼辣椒醬也沒有。如果換成上面的直線SVG，也就是直線看不見了。我們把dashoffset值逐漸變小，則會發現，火腿腸上的辣椒醬一點一點出現了，好像辣椒醬從火腿腸根部塗抹上去一樣。

<style type="text/css">    
    body{background-color:#00688B;    
    }   
    .text{font-size: 64px;    
     font-weight: normal;    
     text-transform: uppercase;    
     fill:none;   
    stroke: #B0E0E6;    
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
    }
    .text-1{stroke: #FFEC8B;
        animation-delay:-1.5s;    
    text-shadow:5px 5px 5px #FFEC8B;
        }
    .text-2{stroke:#AEEEEE;    
        animation-delay:-3s;     
        text-shadow:5px 5px 5px #7FFFD4;
        }
    .text-3{stroke:#EEE0E5;animation-delay:-4.5s;text-shadow:5px 5px 5px #7FFFD4;
        }
    .text-4{stroke:#FFC1C1;animation-delay:-6s;text-shadow:5px 5px 5px #7FFFD4;
        } 
    @keyframes stroke { to { stroke-dashoffset: -400;}}
</style>
<svg width="100%" height="100">   
 <text text-anchor="middle" x="50%" y="50%" class="text text-1" > Happy birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-2" > Happy birthday to you❤</text>    
 <text text-anchor="middle" x="50%" y="50%" class="text text-3" > Happy birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-4" > Happy birthday to you❤ </text>
</svg>

 

#

以上是SVG霓虹燈效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！