从上到下再向左绘制边框

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