使用CSS或JS在图像的边框上加载Square

Question

感谢您阅读本文，我想要一个正方形，它将在2秒内加载50x50的图像

加载方形图片：

从上面的图像中，中间一个图像是高度= 50和宽度= 50的图像，红色边框正在加载正方形。

每当有人将鼠标悬停在该图像上时，红色正方形将开始在图像周围加载，并在2秒钟后完成

Answer 1

您可以使用SVG并为内部图像周围的路径设置动画，例如

效果的方向取决于您构建path

的方式

svg {
  cursor: pointer;
  border: 1px dashed #ccc;
  width: 150px;
  height: 150px;
  background: url(https://i.ibb.co/qdngFNL/Screenshot-2019-06-07-at-11-45-55.png) center no-repeat / 50px 50px;
}

svg:hover path {
  animation: dash 2s linear 0s forwards; 
}

svg path {
   stroke-dasharray: 770;
   stroke-dashoffset: 770;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox="0 0 200 200">
  <path d="M2 12L2 188 Q 2,198 20,198 L 188 198 Q198,198 198,188 L198 12 Q198,2 188,2 L12 2 Q2,2 2,12z" stroke="red" stroke-width="4" fill="none"/>
</svg>

此外，出于可访问性考虑，如果您需要向用户传达有用的信息，请记住添加一个aria-label / aria-describedby属性，否则请添加一个role="none"（或“ {{ 1}}“），以从辅助技术中隐藏此元素。