酷炫的流动头像框

站长

2023年05月27日 20:39 · 阅读数 21

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

酷炫的流动头像框

可以看到箭头移动上去，边框开始流动至整个头像，且箭头离开后，流动边框恢复至默认状态。给人一种酷炫动感的体验

完整代码：

<!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的动画效果以及鼠标移动上去改变边框线条的样式