HTML5 SVG+CSS3霓虹燈文字邊框動畫特效
- 2019 年 12 月 13 日
- 筆記
預覽效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://a-oss.zmki.cn/img/5ca33df6bde67.css" type="text/css" /> <!--<link rel="stylesheet" href=" C:/Users/zuanm/Desktop/svgBox.css" type="text/css" /> <link rel="stylesheet" href="./css/2222.css" type="text/css" /> --> </head> <body> <div id="svgBox"> <svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text text-1">鑽芒博客</text> <text text-anchor="middle" x="50%" y="50%" class="text text-2">鑽芒博客</text> <text text-anchor="middle" x="50%" y="50%" class="text text-3">鑽芒博客</text> <text text-anchor="middle" x="50%" y="50%" class="text text-4">鑽芒博客</text> </svg> </div> </body> </html>
css
<style> #svgBox{[/b] width:100%; margin:100px auto; } .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; } } .svgText{ width:600px; margin:0 auto; } .svgText h3{ font-size:18px; color:#333; line-height:2; } .svgText p{ font-size:16px; color:#888; line-height:2; } .svgText p a,.svgText p a:hover{ color:#01a6fc; font-weight:600; } .svgText ul li{ font-size:16px; color:#888; line-height:2; }</style>
