动画虚线边框而不添加笔划

Question

我的效果如下：

正如你所看到的，我想在悬停时盒子上有两个效果：

1. 让它成长。简单。 CSS3转换（scale（））。
2. 让右下方的框生长并以框架结束。不那么容易。

我开始用虚线边框尝试它，但它增加了更多笔画。然后我开始考虑用SVG做它，但同样的事情发生在那里。现在我的想法已经不多了。有什么想法吗？

我需要它在动态时也是动态的，因为盒子会在不同的页面上移动，所以我想远离PNG精灵。

我的创造性思维停止了旋转。我会感谢每一个有助于实现我想要的结果的想法。干杯！

Answer 1

D3？

基本上使用stroke-dasharray并以与广场本身的宽度/高度相同的速度增大dasharray中的间隙。

http://jsfiddle.net/Q5Jag/1848/

<svg height="500" width="500"><rect x="10" y="10" width="20" height="20"></rect></svg>

d3.select("rect")
    .transition()
  .duration(5000)
  .attr("width", 500)
  .attr("height", 500)
  .style("stroke-dasharray", "8 492") // adds up to 500 (finishing width/height)
 ;


rect {
  stroke: black;
  stroke-width: 1;
  fill: white;
  stroke-dasharray: 8 12; // adds up to 20 (starting width/height)
  stroke-dashoffset: 4;
}

Answer 2

问题在于使用缩放变换，边缘上的边框也会受到变换的影响 如果你想避免这种情况，你可以使用伪元素转换来悬停它们：

div {
  position: relative;
  width: 40%;
  padding: 5% 20% 5% 5%;
  background: #62B55C;
  color: #fff;
}
div:after,div:before,p:after,p:before {
  content: '';
  position: absolute;
  width: 5%; height:5%;
  border-style: solid;
  transition: right .3s ease-in-out, bottom .3s ease-in-out;
}
div:before {
  border-width: 2px 0 0 2px;
  right: 15%; bottom: 15%;
}
div:after {
  border-width: 2px 2px 0 0;
  right: 5%; bottom: 15%;
}
p:before {
  border-width: 0 0 2px 2px;
  right: 15%; bottom: 5%;
}
p:after {
  border-width: 0 2px 2px 0;
  right: 5%; bottom: 5%;
}
div:hover:before { bottom: 90%; right: 90%; }
div:hover:after { right: 5%; bottom: 90%; }
div:hover p:before { bottom: 5%; right: 90%; }
h1 {font-size: 3em;margin: 0;}

<div>
  <h1>A very big title</h1>
  <p>Some text with buffalos: buffalo, buffalo, buffalo and another one, buffalo</p>
</div>