酷炫的流动头像框
废话不多说，先看下效果图长啥样。喜欢的小伙伴就给个关注，点个赞！
可以看到箭头移动上去，边框开始流动至整个头像，且箭头离开后，流动边框恢复至默认状态。给人一种酷炫动感的体验
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷炫的流动头像框</title>
<style type="text/css">
.profilephoto{
cursor: pointer;
position: relative;
}
.borderMove{
width: 250px;
height: 250px;
stroke: #fd7000;
stroke-width:6px;
stroke-dashoffset:-200;
transition: 1s ease;
stroke-dasharray: 100 400;
fill: none;
}
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #2e3032;
height: 100vh;
}
.profilephoto:hover .borderMove{
stroke-dasharray: 50 0;
stroke: #ed234c;
stroke-dashoffset:0;
stroke-width:4px;
}
</style>
</head>
<body>
<div>
<div class="profilephoto">
<svg width="250" height="250">
<rect class="borderMove">
<img style="position: absolute;left: 5px;top: 5px" src="face.jpg">
</rect>
</svg>
</div>
</div>
</body>
</html>知识点：
1.这里主要用到svg标签，以及stroke属性中的偏移方法。可以对线条的方向，长度进行处理，可以理解成是一种可缩放的矢量图。
2.结合css的动画效果以及鼠标移动上去改变边框线条的样式