Question

我尝试使用按钮悬停时产生涟漪效果，我唯一的问题是当我将鼠标悬停在它上面时，文字摇晃/摇铃/颤抖，我希望它能保持平稳过渡。关于如何制止这个的任何想法？

＆＃13;

a {
  display: block;
  position: relative;
  width: 300px;
  height: 50px;
  background: rgba(0, 0, 255, .2);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  margin: 10% auto;
}
p,
span:first-of-type,
span:last-of-type {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  transition: all .3s;
}
span:first-of-type {
  transition-delay: .1s;
  z-index: 1;
}
span:last-of-type {
  transition-delay: .2s;
  z-index: 2;
}
span.cta {
  color: #33C;
  text-transform: uppercase;
  font-family: Arial;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  display: block;
  transition: color .3s;
  z-index: 3;
}
a:hover p,
a:hover span:first-of-type,
a:hover span:last-of-type {
  width: 110%;
  height: 660%;
  border-radius: 50%;
  background: rgba(0, 0, 255, .2);
}
a:hover span:first-of-type,
a:hover span:last-of-type {
  width: 100%;
  height: 100%;
}
a:hover p span {
  color: #FFF;
}

＆＃13;

<a href="#">
  <p>
    <span></span>
    <span class="cta">Shop the Trend</span>
    <span></span>
  </p>
</a>

＆＃13;

N.B。它在IE11中很好，它发生在其他所有浏览器中。

Answer 1

在这里你去...修改HTML [在div中添加按钮文本并应用新类＆＃34; textCta＆＃34;对它]

<span class="cta"><div class="textCta">Shop the Trend</div></span>

CSS

.textCta {
    color:#33C;
    text-transform:uppercase;
    font-family:Arial;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    display: block;
    transition: color .3s;
    z-index: 3;
}

Demo

Answer 2

通过删除p标签并将实际文本放在div中，我设法阻止了颤抖，仍然保持背景效果相同。

感谢Nofi的帮助。

<a href="#">
    <span></span>
    <div class="cta">Shop the Trend</div>
    <span></span>
</a>

使用CSS过渡来颤抖文本

2 个答案: