首先简单的描述一下svg中两个属性：
stroke-dasharray：表示每个虚线的长短。
stroke-dashoffset：表示首个虚线的偏移量。
当两者都特别大的时候就会消失掉
直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框逐渐消失</title> <style> .br_hide{ text-decoration:none; } .br_hide:hover{ text-decoration:none; } .br_hide:hover text{ fill:#913F3F; } .br_hide:hover g{ animation:first1 3s linear infinite; stroke:#913F3F; stroke-width:2; -moz-animation:first1 0.5s linear; -webkit-animation:first1 0.5s linear; } @-moz-keyframes first1 { 0% {stroke-dasharray: 0%, 500%;stroke-dashoffset: 0%;} 100% {stroke-dasharray: 500%, 0%;stroke-dashoffset: 0%;} } @-webkit-keyframes first1 { 0% {stroke-dasharray: 0%, 500%;stroke-dashoffset: 0%;} 100% {stroke-dasharray: 500%, 250%;stroke-dashoffset: 0%;} } </style> </head> <body> <a href="#" class="br_hide"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36"> <rect fill="none" stroke="#DBEAF9" stroke-width="2" width="80" height="36"/> <text x="10" y="24">王玉娇</text> <g fill="none" > <rect width="80" height="36"/> </g> </svg> </a> <a href="#" class="br_hide"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36"> <rect fill="none" stroke="#C8E3CB" stroke-width="2" width="80" height="36"/> <text x="10" y="24">王玉娇</text> <g fill="none" > <rect width="80" height="36"/> </g> </svg> </a> <a href="#" class="br_hide"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="36"> <rect fill="none" stroke="#DBEAF9" stroke-width="2" width="80" height="36"/> <text x="10" y="24">王玉娇</text> <g fill="none" > <rect width="80" height="36"/> </g> </svg> </a> </body> </html>
即可实现效果。