此自定义图形需要填充三种不同的颜色。每种颜色都将填充1-100%。所以蓝色将从头到脚填充(1-100%),红色将从头部的底部到头顶(1-100%)填充,因此橙色。这可能使用svg / canvas或任何其他方式吗?
答案 0 :(得分:5)
CSS动画方法
z-index
。:before
和:after
创建,但我使用了嵌套div。animation-delay
。如果第一个形状的动画持续时间为2秒,则给出下一个形状动画延迟2秒,这会产生连续效果。操纵边界半径,位置,宽度和高度值以获得所需的形状和位置。
编辑:已更新为Codepen中的状态指示器
body {
background: lightgray;
}
/* Red Filler */
.red-filler {
background: lightgray;
border-radius: 50%;
width: 200px;
height: 200px;
border: 10px solid white;
position: relative;
overflow: hidden;
}
.red-liquid {
width: 100%;
position: absolute;
bottom: 0;
animation: fill-up 6s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #E63B44;
}
/* Orange Filler */
.orange {
z-index: -1;
position: absolute;
}
.orange-filler-1 {
background: lightgray;
border-radius: 50%;
width: 200px;
height: 200px;
border: 10px solid white;
position: relative;
top: -50px;
overflow: hidden;
}
.orange-liquid-1 {
width: 100%;
position: absolute;
bottom: 0;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
animation: fill-up 3s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-delay: 3s;
background: #EC952E;
overflow: hidden;
}
.orange-filler-2 {
background: lightgray none repeat scroll 0 0;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
border-color: white;
border-image: none;
border-style: none solid solid;
border-width: 0 10px 10px;
height: 100px;
left: 50px;
overflow: hidden;
position: relative;
top: -74px;
width: 100px;
}
.orange-liquid-2 {
animation: fill-up 3s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #EC952E;
position: absolute;
bottom: 0;
width: 100%;
}
/* Blue Filler */
.blue {
z-index: -2;
position: absolute;
top: 40px;
}
.blue-filler-1 {
background: lightgray none repeat scroll 0 0;
border-radius: 50%;
height: 250px;
overflow: hidden;
position: relative;
width: 260px;
left: -20px;
top: -10px;
}
.blue-liquid-1 {
width: 100%;
position: absolute;
bottom: 0;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-delay: 4s;
background: #566EB1;
overflow: hidden;
}
.blue-filler-2 {
background: lightgray none repeat scroll 0 0;
border-radius: 50%;
height: 275px;
left: -25px;
overflow: hidden;
position: relative;
top: -100px;
width: 275px;
}
.blue-liquid-2 {
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #566EB1;
position: absolute;
bottom: 0;
width: 100%;
animation-delay: 2s;
}
.blue-filler-3 {
background: lightgray none repeat scroll 0 0;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
height: 110px;
left: 35px;
overflow: hidden;
position: relative;
top: -125px;
width: 150px;
}
.blue-liquid-3 {
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #566EB1;
position: absolute;
bottom: 0;
width: 100%;
}
/* Container for centering */
.container {
margin: 0 auto;
width: 500px;
margin-top: 50px;
}
/* Animation Keyframe */
@keyframes fill-up {
0% {
height: 0;
}
100% {
height: 100%;
}
}

<div class="container">
<!-- Red container -->
<div class="red">
<div class="red-filler">
<div class="red-liquid"></div>
</div>
</div>
<!-- Orange container -->
<div class="orange">
<div class="orange-filler-1">
<div class="orange-liquid-1"></div>
</div>
<div class="orange-filler-2">
<div class="orange-liquid-2"></div>
</div>
</div>
<!-- Blue container -->
<div class="blue">
<div class="blue-filler-1">
<div class="blue-liquid-1"></div>
</div>
<div class="blue-filler-2">
<div class="blue-liquid-2"></div>
</div>
<div class="blue-filler-3">
<div class="blue-liquid-3"></div>
</div>
</div>
</div>
&#13;