使用html、css创建可填充颜色的自定义图形
使用html、css创建可填充颜色的自定义图形,css,canvas,svg,css-animations,css-shapes,Css,Canvas,Svg,Css Animations,Css Shapes,此自定义图形需要填充三种不同的颜色。每种颜色将填充1-100%。因此，蓝色将从腿部到头部（1-100%）填充，红色将从头部底部到头部顶部（1-100%）填充，橙色也是如此。使用svg/canvas或任何其他方式都可以做到这一点吗 CSS动画方法 用不同的div分割三个不同的颜色部分。根据优先级将其放置在HTML中，或将其设置为z-index，而不考虑标记 细分颜色部分以创建支架和填充背景。虽然这可以通过：before和：after创建，但我使用了嵌套的div 创建从0%高度过渡到100%高度的填
此自定义图形需要填充三种不同的颜色。每种颜色将填充1-100%。因此，蓝色将从腿部到头部（1-100%）填充，红色将从头部底部到头部顶部（1-100%）填充，橙色也是如此。使用svg/canvas或任何其他方式都可以做到这一点吗 CSS动画方法
z-index：before：after动画延迟。如果第一个形状的动画持续时间为2秒，则为下一个形状的动画延迟2秒，以创建连续效果正文{
背景：浅灰色；
}
/*红色填料*/
.红色填料{
背景：浅灰色；
边界半径：50%；
宽度：200px；
高度：200px；
边框：10px纯白；
位置：相对位置；
溢出：隐藏；
}
.红色液体{
宽度：100%；
位置：绝对位置；
底部：0；
动画：充满6秒轻松前进；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
背景：#E63B44；
}
/*橙色填料*/
.橙色{
z指数：-1；
位置：绝对位置；
}
.橙色填充物-1{
背景：浅灰色；
边界半径：50%；
宽度：200px；
高度：200px；
边框：10px纯白；
位置：相对位置；
顶部：-50px；
溢出：隐藏；
}
.橙色-液体-1{
宽度：100%；
位置：绝对位置；
底部：0；
边界左下半径：25%；
边界右下半径：25%；
动画：填充3秒轻松前进；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
动画延迟：3s；
背景：#EC952E；
溢出：隐藏；
}
.橙色填料-2{
背景：浅灰色无重复滚动0；
边界左下半径：40%；
边框右下半径：40%；
边框颜色：白色；
边界图像：无；
边框样式：非实心；
边框宽度：0 10px 10px；
高度：100px；
左：50px；
溢出：隐藏；
位置：相对位置；
顶部：-74px；
宽度：100px；
}
.橙色-液体-2{
动画：填充3秒轻松前进；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
背景：#EC952E；
位置：绝对位置；
底部：0；
宽度：100%；
}
/*蓝色填料*/
蓝先生{
z指数：-2；
位置：绝对位置；
顶部：40px；
}
.blue-filler-1{
背景：浅灰色无重复滚动0；
边界半径：50%；
高度：250px；
溢出：隐藏；
位置：相对位置；
宽度：260px；
左：-20px；
顶部：-10px；
}
.blue-liquid-1{
宽度：100%；
位置：绝对位置；
底部：0；
边界左下半径：40%；
边框右下半径：40%；
动画：向前填充2秒；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
动画延迟：4s；
背景#566EB1；
溢出：隐藏；
}
.blue-filler-2{
背景：浅灰色无重复滚动0；
边界半径：50%；
高度：275px；
左：-25px；
溢出：隐藏；
位置：相对位置；
顶部：-100px；
宽度：275px；
}
.blue-liquid-2{
动画：向前填充2秒；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
背景#566EB1；
位置：绝对位置；
底部：0；
宽度：100%；
动画延迟：2s；
}
.blue-filler-3{
背景：浅灰色无重复滚动0；
边界左下半径：50%；
边框右下半径：50%；
高度：110px；
左：35px；
溢出：隐藏；
位置：相对位置；
顶部：-125px；
宽度：150px；
}
.blue-liquid-3{
动画：向前填充2秒；
动画计时功能：立方贝塞尔（.2、.6、.8、.4）；
背景#566EB1；
位置：绝对位置；
底部：0；
宽度：100%；
}
/*定心容器*/
.集装箱{
保证金：0自动；
宽度：500px；
边缘顶部：50px；
}
/*动画关键帧*/
@关键帧填充{
0% {
身高：0；
}
100% {
身高：100%；
}
}