地鐵上逛segmentfault看到一篇用純css和SVG來實現的很贊的效果，覺得拿來做一些開場效果動畫應該不錯。 原文地址：https://segmentfault.com/a/1190000010963326 覺得很有趣，正好925快到了，就擼了一個生日快樂的 效果圖如下： 就像是一圈圈螞蟻在它 ...
地鐵上逛segmentfault看到一篇用純css和SVG來實現的很贊的效果，覺得拿來做一些開場效果動畫應該不錯。
原文地址：https://segmentfault.com/a/1190000010963326
覺得很有趣，正好925快到了，就擼了一個生日快樂的
效果圖如下：
就像是一圈圈螞蟻在它身上爬。。。。。emmmmm奇特的比喻
fill:none;可以讓圖形不被填充，如果不添加這一屬性，則預設填充顏色是black，這個效果
發現stroke這一系列屬性都很有意思啊，填充啊透明度和stroke-linecap，但是這個效果用的最多的還是stroke-dasharray和stroke-dashoffset。
借鑒解釋：http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/
stroke-miterlimit表示描邊相交（銳角）的表現方式。預設大小是4. 什麼斜角轉斜面的角度損耗之類的意思，值越大，損耗越小。具體幹嘛的，我自己也不確定。大家可查查其他資料。stroke-dasharray表示虛線描邊。可選值為：none,<dasharray>,inherit. 其中，none表示不是虛線；<dasharray>為一個逗號或空格分隔的數值列表。表示各個虛線端的長度。可以是固定的長度值，也可以是百分比值；inherit表繼承。stroke-dashoffset表示虛線的起始偏移。可選值為：<percentage>,<length>,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裡面的描邊（stroke）和填充(fill)就可以達成。數值各種花樣調試有驚喜！✿✿ヽ(°▽°)ノ✿
放上一些SVG基礎知識的鏈接以供大家參考：http://www.w3cplus.com/svg/svg-fill-stroke.html
