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>