Question

我有一个按钮，可以在悬停时更改文本。它是使用CSS content属性和psuedo元素创建的，但是可以直接切换。我希望旧文本淡入新文本。

编辑：这是我的代码。

.btn {
  background-color: #03a9f4;
  padding: 12px 18px;
  margin: 40px;
  font-size: 1.2rem;
  font-weight: 700;
}

#launchtrailerbtn:before {
  content: "LAUNCH TRAILER";
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

#launchtrailerbtn:hover:after {
  content: "CLICK TO VIEW TRAILER";
}

#launchtrailerbtn:hover:before {
  font-family: "Font Awesome 5 Free";
  content: "\f04b";
  margin-right: 10px;
}

<a id="launchtrailerbtn" class="btn btn-primary"></a>

最佳的情况是，如果第一个文本淡入另一个文本，并且背景延伸到适当的长度，有点像现在，但是我希望它可以向左右延伸。

Answer 1

没有特定的代码，我无法真正为您提供帮助。但是使用opacity和transition是可以使文本“淡入淡出”的示例。

div {
  background: pink;
  padding: 5px 25px;
  border-radius: 25px;
  text-align: center;
  width: max-content;
}

div::after {
  content: 'I faded!';
  opacity: 0;
  transition: all 1s;
}

div:hover::after {
  opacity: 1;
}

<div></div>

Answer 2

使用opacity显示和隐藏过渡。希望对您有帮助。谢谢

.btn {
  background-color: #03a9f4;
  padding: 12px 18px;
  margin: 40px;
  font-size: 1.2rem;
  font-weight: 700;
}

#launchtrailerbtn:before {
  content: "LAUNCH TRAILER";
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
 opacity:1
}

#launchtrailerbtn:after {
  content: "CLICK TO VIEW TRAILER";
   transition: all 1s ease;
  opacity:0;
  margin-left: -186px;
}

#launchtrailerbtn:hover:after{
opacity:1;
transition: all 1s ease;
}

#launchtrailerbtn:hover:before{
opacity:0;
}

<a id="launchtrailerbtn" class="btn btn-primary"></a>

悬停更改内容时CSS淡入淡出过渡

2 个答案: