在三角形边界中使用液体效果制作蛇形效果

Question

I want make like this

我用剪辑路径在里面画两个三角形，div加载在小三角形周围移动，并使用关键帧通过移动加载div直到角度和旋转我需要像蛇和液体一样移动。

.wrapper {
  width: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.big-triangle {
  clip-path: polygon(50% 2%, 100% 100%, 0 100%, 50% 2%);
  width: 150px;
  height: 150px;
  background: #e3e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.small-triangle {
  width: 70%;
  height: 73%;
  background: white;
  clip-path: polygon(50% 2%, 100% 100%, 0 100%, 50% 2%);
  position: absolute;
  top: 26px;
}

.load {
  width: 63px;
  height: 15px;
  bottom: 0px;
  left: 19px;
  background: linear-gradient(89.82deg, #3adce7 -1.45%, #263aa3 99.84%);
  border-radius: 10px 10px 10px 10px;
  position: absolute;
  z-index: 0;
  animation: loadMove 4s infinite linear;
}

@keyframes loadMove {
  0% {
    /* height: 15px; */
    left: 10px;
  }
  33% {
    left: 90px;
    bottom: 0px;
    transform: rotate(0deg);
    transform: scaleY(2.5);
  }
  39% {
    left: 88px;
    bottom: 39px;
    transform: rotate(63.333deg);
  }
  66% {
    bottom: 110px;
    left: 50px;
    transform: rotate(63.333deg);
  }
  67% {
    bottom: 113px;
    left: 39px;
    transform: rotate(-61.333deg);
  }
  100% {
    bottom: 14px;
    left: -10px;
    transform: rotate(-63.333deg);
  }
}

 <div class="wrapper">
      <div class="big-triangle">
        <div class="load"></div>
        <div class="small-triangle"></div>
      </div>
    </div>

​

我的问题是，当加载接近角度时，不是像gif那样是液体，需要使液体效果接近三角形角度。

Answer 1

​

.wrapper {
  width: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-triangle {
  width: 163px;
  height: 145px;
  clip-path: polygon(50% 2%, 100% 100%, 0 100%, 50% 2%);
  background-color: #e3e4e4;
  z-index: 0;
}
.small-triangle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

svg path {
  stroke-width: 20px;
  stroke-dasharray: 50 425;
  animation: a 5s linear infinite;
  stroke-linecap: round;
}

@keyframes a {
  to {
    stroke-dashoffset: 470;
  }
}

<div class="wrapper">
      <div class="big-triangle">
        <div class="small-triangle">
          <svg width="160" height="150" viewBox="0 0 189 163" fill="white">
            <defs>
              <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#05a" />
                <stop offset="100%" stop-color="#0a5" />
              </linearGradient>
            </defs>
            <path
              class="path"
              d="M13.5266 155.25L94.5 15L175.473 155.25H13.5266Z"
              stroke="url(#linear)"
              stroke-width="20"
            />
          </svg>
        </div>
      </div>
    </div>

​