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

时间:2015-09-09 05:07:24

标签: css canvas svg css-animations css-shapes

**enter image description here**

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

1 个答案:

答案 0 :(得分:5)

CSS动画方法

  1. 使用不同的div分割三个不同的颜色部分。根据优先级将其放在HTML中,或者无论标记如何都给它z-index
  2. 对用于创建支架和填充背景的颜色部分进行细分。虽然可以使用:before:after创建,但我使用了嵌套div。
  3. 创建一个从0%高度过渡到100%高度的填充关键帧动画。有关填充动画的更多信息,请参阅以下答案:CSS Wipe up animation
  4. 根据您拥有的形状数量,需要先计算animation-delay。如果第一个形状的动画持续时间为2秒,则给出下一个形状动画延迟2秒,这会产生连续效果。
  5. 操纵边界半径,位置,宽度和高度值以获得所需的形状和位置。

    编辑:已更新为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>
    &#13;
    &#13;
    &#13;