html - 填充泪滴CSS3

Question

我试图填充泪滴以将其用作预加载器

这是代码

#drop {
  margin: 100px auto;	
  width: 300px;
  height: 300px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  -webkit-transform:rotate(-45deg);
  z-index: 99;
  position: relative;
  background: #fff;
  border: 1px solid #e74c3c;
  overflow: hidden;
}
#drop::before {
  content: '';
  position: absolute;
  background: #e74c3c;
  width: 100%; 
  bottom: 0;
  animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards infinite;
}
@keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
} 

<div id="drop"></div>

我尝试使用变换和边距但失败了

提前致谢

Answer 1

我使用了 border-radius 的简写，我所做的其他更改是针对 pseudo 元素

• 将 伪 元素的大小加倍。
• 将伪元素放在中心
• 使用 transform: translate(-100%, 10%) rotate(45deg);
将其定位在元素的底部
• 在关键帧中，我将 pseudo 元素移动到顶部

  #drop {
  margin: 100px auto;
  width: 300px;
  height: 300px;
  border-radius: 50% 0 50% 50%;
  -webkit-transform: rotate(-45deg);
  z-index: 99;
  position: relative;
  background: #fff;
  border: 1px solid #e74c3c;
  overflow: hidden;
}

#drop::before {
  content: '';
  position: absolute;
  background: #e74c3c;
  height: 200%;
  width: 200%;
  transform: translate(-100%, 10%) rotate(45deg);
  top: 50%;
  left: 50%;
  transform-origin: center;
  animation: wipe 5s cubic-bezier(.2, .6, .8, .4) forwards infinite;
}

@keyframes wipe {
  0% {
    transform: translate(-100%, 10%) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg);
  }

<div id="drop"></div>