SVG+CSS呈现科技感字体出现方式
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<svg viewBox="0 0 400 200"> <text x="0" y="70%"> HEY </text> </svg> |
CSS:
|
html, body { width: 100%; height: 100%; display: flex; font-family: "Bangers", cursive; background: #000; }
svg { width: 600px; height: 300px; margin: auto; }
svg text { text-transform: uppercase; animation: stroke 5s infinite alternate; letter-spacing: 10px; font-size: 150px; } @keyframes stroke { 0% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 0.8; } 50% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-width: 1.2; } 70% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-width: 1.5; } 90%, 100% { fill: rgba(72, 138, 204, 1); stroke: rgba(54, 95, 160, 0); stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; } } |
