从上到下然后向左绘制边框

Question

我想使用CSS过渡从上到下绘制边框。 像：从左到右扩展边框。

示例：我有一张图片。当我单击图像时，一条线从上到下移动，并从右到左移动。

Answer 1

我认为您正在寻找这种效果。 您可以在此处查看演示：

img {
  width: 100px;
  height: 100px;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;
}

img:hover {
  width: 300px;
  height: 300px;
}

<h1>Transition</h1>
<img src="https://lh3.googleusercontent.com/VT-PqxMMsA2wPy7kzmuKGDIzaA3AGuXKExqnfOfwTEy5AvLIMTranbfNGheRr457RD4=s180">