html - CSS动画- "starting from border"如何填写？

Question

确实是一个非常简单的问题，但是我在网上找不到任何东西。

基本上，如何使用从边界开始的元素的特定颜色为填充动画？

例如，边框会越来越大，直到形状被填满。

Answer 1

如果我理解你的问题，你想为元素的边框宽度设置动画，也许是 border-top-width，但我认为这不会产生你正在寻找的效果，增加边框只会尽可能多地插入元素的边框宽度，它看起来不会像元素被填充一样，您可以为将覆盖外部元素的嵌套元素设置动画，您可以查看此示例以了解我在做什么说

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>