javascript - 在网站上显示关键文本的各种方式可能是什么？

Question

我想在网站上显示关键文本，我希望客户注意。我们可以通过哪些不同的方式让客户关注此文本？我们不希望客户错过阅读本文。

标签： javascripthtmlcssuser-experience

Answer 1

这是对您使用这样的 css 的建议（颜色组合是根据您的颜色主题选择依赖项）。

我已经用突出显示文本示例演示的漂亮示例编辑了答案

 @import url('https://fonts.googleapis.com/css?family=Acme&display=swap');

body {
  background-color: #07020C;
  font-family: 'Acme', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  position: absolute;
  color: #fff;
  font-size: 100px;
  text-align: center;
  transition: 0.5s;
  animation: shine 2s infinite;
}

@keyframes shine {
  0%, 20%, 50%, 80% {
      color: #fff;
      text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 40px #fff,
                   0 0 60px #fff;
  }
}

<div class="container">
  <div class="text">
    <span>H</span>
    <span>i</span>
    <span>g</span>
    <span>h</span>
    <span>l</span>
    <span>i</span>
    <span>g</span>
    <span>h</span>
    <span>t</span>
  </div>
</div>