使用SVG + CSS實現動態霓虹燈文字效果
阿新 • • 發佈:2017-09-04
rdp orm ans cnblogs fill href 大神 case ima
效果圖:
原理:多個SVG描邊動畫使用不同的animation-delay即可!
對於一個形狀SVG元素或文本SVG元素,可以使用stroke-dasharray來控制描邊的間隔樣式,並且可以用stroke-dashoffset來控制描邊的偏移量,借此可以實現描邊動畫效果,更具體的資料可以看看張大神的《純CSS實現帥氣的SVG路徑描邊動畫效果》
我們先實現一個簡單的文字描邊動畫:
<svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text"> segmentfault.com</text> </svg>
.text{ font-size: 64px; font-weight: bold; text-transform: uppercase; fill: none; stroke: #3498db; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; } @keyframes stroke { 100% { stroke-dashoffset: -400; } }
演示地址:http://output.jsbin.com/demic...
然後我們同時使用多個描邊動畫,並設置不同的animation-delay:
<svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text text-1"> segmentfault.com </text> <text text-anchor="middle" x="50%" y="50%" class="text text-2"> segmentfault.com</text> <text text-anchor="middle" x="50%" y="50%" class="text text-3"> segmentfault.com </text> <text text-anchor="middle" x="50%" y="50%" class="text text-4"> segmentfault.com </text> </svg>
註意:要使用多少種顏色,就放多少個text
.text{ font-size: 64px; font-weight: bold; text-transform: uppercase; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; } .text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; } .text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; } .text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; } .text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; } @keyframes stroke { 100% { stroke-dashoffset: -400; } }
大功告成,演示地址:http://output.jsbin.com/vuyuv...
需要註意的幾個點:
- 各個元素的animation-delay與animation的總時長的設置要協調
- stroke-dashoffset與stroke-dasharray的設置要協調
轉自:https://segmentfault.com/a/1190000010963326
使用SVG + CSS實現動態霓虹燈文字效果