关于前端:酷炫的流动头像框

46次阅读

共计 887 个字符，预计需要花费 3 分钟才能阅读完成。

废话不多说，先看下效果图长啥样。喜爱的小伙伴就给个关注，点个赞！

能够看到箭头挪动下来，边框开始流动至整个头像，且箭头来到后，流动边框复原至默认状态。给人一种酷炫动感的体验

<!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 的动画成果以及鼠标挪动下来扭转边框线条的款式

正文完