Html SVG边框动画

我发现了很酷的SVG边框动画，并尝试将其应用于我的网站，但是我的网站包含不同大小的图像，因此动画受到宽度和高度的限制

有没有办法编辑代码，以便我可以对所有图像大小使用此动画

对不起，我的英语很差：）

那么：

<svg class="img">

---

您可以使用简单的CSS和渐变，而不必考虑容器或img的大小：

div, img {
  margin:1em;
  display:inline-block;
  padding:0.5em;
  vertical-align:top;
  border-radius:10px;
  background:linear-gradient(to left,black 33.33%,transparent 40% ,transparent 50%,black 66.66%) 0 0 repeat-x, linear-gradient(to right,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 100%  repeat-x, linear-gradient(to top,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 0 100% repeat-y, linear-gradient(to bottom,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 0 repeat-y, linear-gradient(to bottom right,turquoise,white,lime) center no-repeat ;
  background-color:gray;
  background-size:300% 5px,300% 5px,5px 300%,5px 300%,100% 100%;
  transition:1.5s linear; 
  }
div:hover { background-position:100% 0 ,0% 100%, 0 0 , 100% 100%, 0 0 ;}

可能的标记

<div>
  <h1> border transition</h1>
  <p>text</p>
</div>
<img src="http://lorempixel.com/200/150/"/>

边界过渡
正文

div, img {
  margin:1em;
  display:inline-block;
  padding:0.5em;
  vertical-align:top;
  border-radius:10px;
  background:linear-gradient(to left,black 33.33%,transparent 40% ,transparent 50%,black 66.66%) 0 0 repeat-x, linear-gradient(to right,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 100%  repeat-x, linear-gradient(to top,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 0 100% repeat-y, linear-gradient(to bottom,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 0 repeat-y, linear-gradient(to bottom right,turquoise,white,lime) center no-repeat ;
  background-color:gray;
  background-size:300% 5px,300% 5px,5px 300%,5px 300%,100% 100%;
  transition:1.5s linear; 
  }
div:hover { background-position:100% 0 ,0% 100%, 0 0 , 100% 100%, 0 0 ;}

<div>
  <h1> border transition</h1>
  <p>text</p>
</div>
<img src="http://lorempixel.com/200/150/"/>