CSS動畫 - 如何填寫「從邊框開始」？

Question

很簡單的問題，但是，我找不到任何東西在線。

基本上，你如何使用特定顏色的元素爲邊界開始填充動畫？

例如，邊界變得越來越大，直到形狀被填充。

Answer 1

如果我理解你的問題，你想動畫元素的邊框寬度，可能是邊框頂寬，但我不認爲這會創建你正在尋找的效果，增加邊框會只要按照邊框寬度設置的那樣推入元素，它不會看起來像是元素被填充，你可以爲覆蓋外層元素的嵌套元素設置動畫效果，你可以查看這個例子，中號說

的HTML：

<style> 
#theBorderDiv, #theTwoDivs { 
display: inline-block; 
background-color: #CCC; 
height: 0px; 
width: 300px; 
border-top-color: red; 
border-top-style: solid; 
border-top-width: 1px; 
height: 200px; 
vertical-align: top; 
} 

#theTwoDivs{ 
    margin-top: 200px; 
    position: relative; 
} 

#theInnerDiv 
{ 
    position: absolute; 
    top:0px; 
    height: 0px; 
    width: 300px; 
    background-color: red; 
}  
</style> 
<div id="theBorderDiv"></div> 

<div id="theTwoDivs">  
<div id="theInnerDiv"></div> 
</div> 

的JavaScript：

<script type="text/javascript">   
    $('#theBorderDiv').animate({borderTopWidth:200},1000) 
    $('#theInnerDiv').animate({height:200},1000) 
</script>