html - 一键更改文本

Question

我正在用 Html 和 Css 建立一个网站。

当您单击该网站的链接时，黑色背景会出现一些白色文本。（让我们说，“你好！点击开始！”）然后当你点击它时，一个图像会淡入，一些新文本被旧文本替换，顶部也会出现一个导航栏。

我已经解决了褪色图像的问题，没问题。但是文本是最难的（我在文本中使用了 fadeAndScale 动画）。任何帮助，将不胜感激！

这是我到目前为止所得到的：

网站html代码 网站css代码

（注意：我不能使用 Javascript 和使用 Cloud 9 ......对不起......我也是这个网站的新手）

Answer 1

看看是否有帮助（要在没有 js 的 div 上单击工作，您需要 tabindex）。当您提出问题时，请提供您的代码（不是代码图像：）

.box {
  color: #FFF;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  background-color: #000;
  padding: 30px;
}

.state-2 {
display: none;
}

.box:focus .state-2 {
  display: block;
}

.box:focus .state-1 {
  display: none;
}

<div class="box" tabindex="0">
  <div class="state-1">Hello World</div>
  <div class="state-2">I'm Clicked!</div>
</div>