正文 1732字数 138,125阅读

<style> .text{ font-size: 24px; 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; } } </style> <svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text"> isWTF's blog </text> <text text-anchor="middle" x="50%" y="50%" class="text text-1"> isWTF's blog </text> <text text-anchor="middle" x="50%" y="50%" class="text text-2"> isWTF's blog </text> <text text-anchor="middle" x="50%" y="50%" class="text text-3"> isWTF's blog </text> <text text-anchor="middle" x="50%" y="50%" class="text text-4"> isWTF's blog </text> </svg>
Run code
Cut to clipboard

    注意：要使用多少种颜色，就放多少个text
    需要注意的几个点：
    1. 各个元素的animation-delay与animation的总时长的设置要协调
    2. stroke-dashoffset与stroke-dasharray的设置要协调

    参考资料：
    纯CSS实现帅气的SVG路径描边动画效果
    SVG 文本 - <text>