如何在悬停时放慢文字速度?

时间:2018-03-27 11:59:16

标签: html css css3 css-transitions pseudo-element

我试图在悬停时创建一个文本出现在另一个文本之前的按钮。我实现了这一点,但不能对此施加任何延迟。

看看这个词有多快"让""出现。需要放慢速度。



.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn:hover::before {
  content: "Let's ";
}

<button class="btn">
Go
</button>
&#13;
&#13;
&#13;

我尝试使用此答案switching out link text on hover - transition,但它实际上是替换了原始文本吗?

3 个答案:

答案 0 :(得分:4)

您可以最初显示文本并创建宽度转换,例如:

&#13;
&#13;
.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn::before {
  display:inline-block;
  vertical-align:text-bottom;
  content: "Let's ";
  max-width:0px;
  white-space:nowrap;
  overflow:hidden;
  transition:1s;
}
.btn:hover::before {
  max-width:50px;
}
&#13;
<button class="btn">
Go
</button>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

尝试将transition-delayopacity

一起使用

&#13;
&#13;
.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn::before {
  opacity: 0;
  content: "Let's ";
  transition: all .3s linear 0s;
  position: absolute;
  transform: translateX(-110%);
}

.btn:hover::before {
  transition: all .5s linear .3s;
  opacity: 1;
}
&#13;
<button class="btn">Go</button>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以通过在转换中添加延迟来实现这一目标吗?

.btn {
    transition-delay: 2s;
}