html - SVG 边框动画

Question

我找到了 this很酷的 SVG 边框动画，我试图将它应用到我的网站，但是我的网站包含不同大小的图像，因此动画受到宽度和高度的限制。

有什么方法可以编辑代码，以便我可以将此动画用于所有图像尺寸？

抱歉我的英语不好 :)

<svg width="200" height="200">
      <line class="top" x1="0" y1="0" x2="600" y2="0"/>
      <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
      <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
      <line class="right" x1="200" y1="0" x2="200" y2="600"/>
  </svg>

Answer 1

您可以使用简单的 CSS 和渐变，而不用担心容器或 img 的大小: DEMO

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/"/>