先看效果图吧
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<style>
*{
margin: 0;padding:0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
svg{
background: rgba(0,0,0,0.6);
width: 400px;
height: 400px;
}
rect{
fill:transparent;
stroke-width: 4px;
stroke: orange;
stroke-dashoffset: -225; //!!!线段偏移
stroke-dasharray: 100 225; //!!!线段长100px,间距225px
transition: 1s ease;
}
rect:hover{
stroke-width: 2px; //恢复到完整状态
stroke-dashoffset: 1;
stroke-dasharray: 400;
}
text{
font-size: 1em;
}
body::after{
z-index: -1;
content:"Button";
position: absolute;
font-size:1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<svg>
<rect x="125" y="175" width="150" height="50"></rect>
</svg>
</body>
</html>
stroke-dasharray 与 stroke-dashoffset就靠这两个属性运转
