0

このクールな SVG ボーダー アニメーションを見つけたので、これを自分の Web サイトに適用しようとしましたが、私の Web サイトにはさまざまなサイズの画像が含まれているため、アニメーションは幅と高さによって制限されます。

このアニメーションをすべての画像サイズに使用できるようにコードを編集する方法はありますか?

私の下手な英語でごめんなさい:)

<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>
4

2 に答える 2

0

シンプルな 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/"/>
于 2014-05-16T12:47:45.720 に答える