SVG边框动画答案

【问题标题】：SVG border animationSVG边框动画
【发布时间】：2014-05-16 20:47:45
【问题描述】：

我找到了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>

【问题讨论】：

标签： html css svg svg-animate

【解决方案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/"/>

【讨论】：

【解决方案2】：

怎么样：

<svg class="img">

css:

svg.img {
    hight: auto;
}

【讨论】：