如何实现CSS绘制汽车的底部到顶部充电填充动画？

要让整个汽车实现从底部到顶部的充电填充效果，核心是把汽车的上下部分作为一个整体，用匹配汽车轮廓的填充元素来做动画，而非仅针对底部区域。以下是修改后的代码和思路：

关键改动说明 #

• 将.car-top和.car-bottom放入统一的.car-body容器，方便控制整体位置与动画范围
• 使用clip-path定义汽车精确轮廓，让填充元素完全贴合汽车形状
• 给.car-body的伪元素添加从底部到顶部的高度动画，实现整体填充效果

修改后的代码 #

CSS

.car-body {
    position: relative;
    width: 450px;
    /* 汽车总高度：底部80px + 顶部边框150px */
    height: 230px;
}

.car-top {
    position: relative;
    border-bottom: 150px solid #555;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    height: 0;
    width: 350px;
    margin: 0 auto;
}

.car-bottom {
    position: relative;
    width: 450px;
    height: 80px;
    background: #555;
}

/* 新增的填充动画元素 */
.car-body::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #04ACFF;
    /* 使用clip-path匹配汽车的轮廓 */
    clip-path: polygon(
        50px 80px, 
        400px 80px, 
        450px 0, 
        0 0
    );
    animation: fillCar 2s cubic-bezier(.2,.6,.8,.4) forwards;
}

.tires:before, .tires:after {
    content: "";
    position: absolute;
    width: 60px;
    height: 50px;
    top: 80px;
    background: #555;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;   
}

.tires:before {
    left: 0;
}

.tires:after {
    right: 0;
}

@keyframes fillCar {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

HTML

<div class="parent">
    <div class="car-body">
        <div class="car-top"></div>
        <div class="car-bottom">
            <div class="tires"></div>
        </div>
    </div>
</div>

补充说明 #

• clip-path的坐标基于.car-body容器：(50px 80px)对应顶部梯形左下角，(400px 80px)对应右上角，(450px 0)和(0 0)对应底部左右端点，完美贴合汽车形状
• 动画fillCar控制伪元素高度从0到100%，因伪元素被clip-path裁剪成汽车形状，填充效果会完全匹配汽车轮廓
• 若需要更平滑的圆角过渡，可调整clip-path坐标，添加round参数来实现

内容的提问来源于stack exchange，提问作者Frosted Cupcake