是否有任何方法可以淡入我的按钮？[等候接听]

Question

我正在开发一个网站，我想添加到我的脚本代码淡入淡出，但我不知道如何。这是我的代码：<script>  function showdiv() {    document.getElementById("show").style.visibility = "visible";  }  setTimeout("showdiv()", 2000);</script><div class="botao" id="show" style="visibility:hidden">  <a href="logreg/login.php" class="btn">    <span></span>    <span></span>    <span></span>    <span></span> Começar  </a></div>

Answer 1

你不能动画，visibility因为它不是一个连续的属性 - 元素是visible或者hidden。相反，您可以设置动画opacity，它可以控制元素的透明度。你想要的是从opacity: 0（完全透明）到opacity: 1（完全不透明/可见）的平滑过渡。

你可以用CSS完全做到这一点 - 根本不需要JavaScript。这种方法的优点是CSS比JavaScript更快，通常更容易理解和维护。

首先在CSS中定义动画关键帧：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }}

然后你只需将动画附加到你的元素（也在CSS中）：

#show {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;}