这个自定义图形需要填充三种不同的颜色。每种颜色都会填充 1-100%。因此蓝色将从腿部到头部填充(1-100%),红色将从头底部填充到头顶(1-100%),等等橙色。这可以使用 svg/canvas 或任何其他方式实现吗?
最佳答案
CSS动画方法
- 用不同的 div 分割三个不同颜色的部分。根据优先级将其放置在 HTML 中,或者无论标记如何,都为其指定
z-index
。 - 分割颜色部分以创建支架和填充背景。虽然这可以使用
:before
和:after
创建,但我使用了嵌套 div。 - 创建从 0% 高度过渡到 100% 高度的填充关键帧动画。有关填充动画的更多信息可以在以下答案中找到:CSS Wipe up animation
- 之前需要根据形状的数量计算
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>
关于css - 创建可以使用 html、css 填充颜色的自定义图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32471307/