Open david2tdw opened 4 years ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>svg</title> <style> .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; } .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; } } </style> </head> <body> <svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text"> segmentfault.com </text> </svg> <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> </body> </html>
纯CSS实现帅气的SVG路径描边动画效果
stroke-dasharray: 将虚线类型应用在描边上. stroke-dashoffset: 属性指定了dash模式到路径开始的距离.
填充和边框
纯CSS实现帅气的SVG路径描边动画效果