<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line</title>
</head>
<style>
.empat {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
background-color: #ddd
}
svg {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px
}
.empat svg line{
stroke-width: 10;
stroke: #000;
fill: none;
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
.empat:hover svg line.top {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
.empat:hover svg line.left {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
.empat:hover svg line.bottom {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.empat:hover svg line.right {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
</style>
<body>
<div class='empat'>
<svg>
<line class='top' x1='0' y1='0' x2='600' y2='0'></line>
<line class='left' x1='0' y1='200' x2='0' y2='-400'></line>
<line class='bottom' x1='-400' y1='200' x2='200' y2='200'></line>
<line class='right' x1='200' y1='600' x2='200' y2='0'></line>
</svg>
</div>
</body>
</html>```
利用SVG实现边框效果
<html>
<head>
<title></title>
</head>
<style type="text/css">
.aa{
position: relative;
width: 120px;
height: 42px;
color: #008fe4;
text-align: center;
line-height: 42px;
webkit-transition: all .3s linear;
transition: all .3s linear;
}
.aa:hover{
background-color: transparent;
color: #008fe4
}
.aa svg{
position: absolute;
top: -1px;
left: -1px;
width: 120px;
height: 42px
}
.aa svg rect {
stroke: #008fe4;
stroke-width: 2px;
stroke-dashoffset: 0;
-webkit-transition: all .9s cubic-bezier(.19,1,.22,1);
transition: all .9s cubic-bezier(.19,1,.22,1);
stroke-dasharray: 324;
}
.aa:hover svg rect {
stroke: #008fe4;
stroke-width: 4px;
stroke-dasharray: 90 210;
stroke-dashoffset: -175;
}
</style>
<body>
<div class='aa'>
<svg><rect x="0" y="0" width="120" height="42" fill="none" stroke='#008fe4' stroke-width='4'></rect></svg>
参与投票
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。