Question

尝试使用Web Speech API创建动画麦克风组件，我将根据其是否在监听来进行切换。当它处于聆听模式时，我想显示一个动画的波纹效果，该效果是通过关键帧缩放来实现的。我还将波纹伪元素绝对定位在我正在使用warning: function returns address of local variable [-Wreturn-local-addr]的中心，这也会破坏其translate。我尝试将其设置在中心，但无法正常工作。知道为什么吗？

transform-origin

.mic-container{
  width: 52px;
  height: 166px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #6593c3;
  border-radius: 3px;
}
button{
  background: none;
  border: none;
  outline: none;
  position: relative;
}
button::before {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: center center;
  border-radius: 100%;
  background-color: #6593c3;
  z-index: 0;
  transition: 1.5s all ease;
  animation: ripple 1.5s infinite;
}
@keyframes ripple {
  0% {
    trasform: scale(1.2);
  }
  50% {
    transform: scale(1.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

Answer 1

声明@keyframes动画时，您正在像这样transform编写transform: scale(1.2);的行，从而删除了先前设置的平移部分。

您还需要像这样设置原始元素：

  transform-origin: 0 0;
  transform: scale(3) translate(-50%, -50%);

要使其正常运行，必须将translate部分保留在transform声明中，如下所示：

@keyframes ripple {
  0% {
    trasform: scale(1.2) translate(-50%, -50%);
  }
  50% {
    transform: scale(1.8) translate(-50%, -50%);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4) translate(-50%, -50%);
    opacity: 0;
  }

Answer 2

首先，您应该使用transform-origin: 0 0;

默认情况下，变换的原点是中心。

transform-origin CSS property

您在这里也有错字。是transform而不是trasform

 0% {
    trasform: scale(1.2);
  }

.mic-container {
  width: 52px;
  height: 166px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #6593c3;
  border-radius: 3px;
}

button {
  background: none;
  border: none;
  outline: none;
  position: relative;
}

button::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0 0;
  border-radius: 100%;
  background-color: #6593c3;
  z-index: 0;
  transition: 1.5s all ease;
  animation: ripple 1.5s infinite;
}

@keyframes ripple {
  0% {
    transform: scale(1.2) translate(-50%, -50%);
  }
  50% {
    transform: scale(1.8) translate(-50%, -50%);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4) translate(-50%, -50%);
    opacity: 0;
  }
}

<div class='mic-container'>
  <button>
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 20.7129C17.5605 20.7129 19.6289 18.5156 19.6289 15.8203V6.76758C19.6289 4.07227 17.5605 1.875 15 1.875C12.4395 1.875 10.3711 4.07227 10.3711 6.76758V15.8203C10.3711 18.5156 12.4395 20.7129 15 20.7129Z" fill="#4976A6"/>
<path d="M21.5039 11.25V15.9199C21.5039 19.4473 18.5859 22.3184 15.0586 22.3184C11.5312 22.3184 8.61328 19.4473 8.61328 15.9199V11.25H7.5V15.9199C7.5 19.8574 10.6055 23.1035 14.5312 23.3906V27.0703H10.2539V28.125H19.6875V27.0703H15.6445V23.3906C19.5117 23.1035 22.5 19.8574 22.5 15.9199V11.25H21.5039Z" fill="#6593C3"/>
</svg>
  </button>
</div>

使用缩放和平移动画元素会弄乱转换原点

2 个答案: