gpt4 book ai didi

css - 创建可以使用 html、css 填充颜色的自定义图形

转载 作者:行者123 更新时间:2023-12-02 09:31:46 24 4
gpt4 key购买 nike

**enter image description here**

这个自定义图形需要填充三种不同的颜色。每种颜色都会填充 1-100%。因此蓝色将从腿部到头部填充(1-100%),红色将从头底部填充到头顶(1-100%),等等橙色。这可以使用 svg/canvas 或任何其他方式实现吗?

最佳答案

CSS动画方法

  1. 用不同的 div 分割三个不同颜色的部分。根据优先级将其放置在 HTML 中,或者无论标记如何,都为其指定 z-index
  2. 分割颜色部分以创建支架和填充背景。虽然这可以使用 :before:after 创建,但我使用了嵌套 div。
  3. 创建从 0% 高度过渡到 100% 高度的填充关键帧动画。有关填充动画的更多信息可以在以下答案中找到:CSS Wipe up animation
  4. 之前需要根据形状的数量计算animation-delay。如果第一个形状的动画持续时间为 2 秒,则为下一个形状设置 2 秒的动画延迟,以创建顺序效果。

操纵边框半径、位置、宽度和高度值以获得所需的形状和位置。

编辑:使用 Codepen 中的状态指示器进行更新

Codepen Demo

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com