废话不多说，先看下效果图长啥样。喜爱的小伙伴就给个关注，点个赞！
能够看到箭头挪动下来，边框开始流动至整个头像，且箭头来到后，流动边框复原至默认状态。给人一种酷炫动感的体验
残缺代码：
<!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的动画成果以及鼠标挪动下来扭转边框线条的款式