Question

我想知道是否有人可以提供解决此问题的方法，对不起，我只是CSS的初学者。基本上，我有一个登录页面，其中有youtube视频在后台播放，并且有一些按钮在8秒钟后出现。这些按钮我希望它们可以通过淡入淡出。我不知道该怎么做，而我拥有的当前CSS片段是

public static String normalizeText(String s){
    return s.replaceAll("[ ().,?!:'\";]", "").toUpperCase();
}

我在哪里可以改变什么以获得所需的效果，所以不仅仅是出现-我希望它平滑地淡入。

Answer 1

Transition

Opacity

这两个将一起提供您想要的淡入淡出效果。默认情况下它将被隐藏，将.show类添加到您的元素中以开始过渡。

.cover .btn-lg {
  transition: opacity 8s;
  opacity: 0;
  padding: 15px 50px;
  font-weight: bold;
}

.cover .btn-lg .show {
  transition: opacity 8s;
  opacity: 1;
}

Answer 2

.cover .btn-lg {
  animation: cssAnimation 13s linear;
  padding: 15px 50px;
  font-weight: bold;
}

@keyframes cssAnimation {
  0%{
    opacity: 0;
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

<div class="cover">
   <button class="btn-lg">Button</button>
</div>

如何在延迟效果上应用平滑的淡入淡出

2 个答案: