動畫虛線邊框無需添加筆觸

我有一個看起來像這樣的預期效果：動畫虛線邊框無需添加筆觸

正如你所看到的，我想在盒子上懸停兩個方面的影響：

製作它成長。簡單。 CSS3變換（scale（））。
將右下角的框放大並最終顯示爲框架。不那麼容易。

我開始嘗試用虛線邊框，但它隨着它的增長而增加了更多筆劃。然後我開始考慮用SVG來做，但同樣的事情發生在那裏。現在我已經沒有想法了。有什麼想法？

我需要它是動態的，當涉及到顏色時，因爲這些方框會在不同的頁面上移動，所以我想遠離PNG精靈。

我的創意頭腦已停止旋轉。我會感謝每個想法，可以幫助實現我想要的結果。乾杯!

來源

2016-05-17 Erik Blomqvist

我有一個解決方案，我將它張貼一旦我得到homr –

可能有關到http://stackoverflow.com/questions/14387690/css-show-only-corner-border/33106243#33106243 – Harry

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; 
}

來源

2016-05-17 12:10:59 mgraham

這是最乾淨的結果。乾杯! –

的問題是使用縮放，邊緣上的邊界也將被改造的影響。
如果你想避免這種情況，你可以使用僞元素的過渡，將它們移至懸停：

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>

來源

2016-05-17 12:30:58

我一直希望避免僞元素，只是用一個大元素，因此是最初的問題。但我真的很喜歡你的結果（和努力）！ –

動畫虛線邊框無需添加筆觸

回答

相關問題