一键更改文本

Question

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

当您点击 link 进入该网站时，会出现黑色背景和一些白色文本。（我们就这么说吧，"Hello! Click to get started!"）然后当你点击它时，一个图像淡入，一些新文本被旧文本替换，顶部还会出现一个导航栏。

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

这是我目前得到的：

Website html code Website css code

（注意：我不能使用 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>

一键更改文本

Changing text with one click

html

css

cloud9