主页 / 问题 / 1237504
Accepted
Проста Miha
Asked:2022-01-29 21:04:02 +0000 UTC2022-01-29 21:04:02 +0000 UTC

如何制作像赛博朋克 2077 中的动画文字？

  • 772

像这样的东西

我应该使用 svg 还是什么？或者类似的东西我会非常感激

javascript

1 个回答

  1. Best Answer

    对@andreymal 在评论中指出：

    对于学校项目来说，这是一个极其复杂的动画，需要大量的模型、关键帧、着色器和滤镜。

    要达到这种效果，需要完全不同的技术，比如WebGL。仅使用 CSS ，您无法完全实现这种效果，这是肯定的。好吧，最大的情况是，只有在您必须大量修补的远程相似的东西上，才会有欲望。但鉴于这只是一个学校项目，我绝对不会这样做（如果你问得好，也许Q 中的 WebGL 专家@Stranger会为你解决问题），所以我建议尽快先令（我认为这是你会做得很好的，你的问题内容让我得出了这个观点）。好吧，例如，一个五分钟的工作：

    @import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
body {
  background-color: black;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: black;
}

#container h1 {
  font-size: 7.5em;
  color: rgba(184, 134, 11, 1);
  font-family: 'ZCOOL KuaiLe', cursive;
  animation-name: text;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes text {
  1% {
    color: #C71585;
    font-size: 7em;
    filter: drop-shadow(0em 0em 0.05em #6495ED);
  }
  5% {
    color: black;
    filter: drop-shadow(0em -0.1em 0.05em #6495ED);
  }
  7% {
    color: #FFFF00;
    filter: drop-shadow(-0.1em -0.1em 0.05em #6495ED);
  }
  9% {
    color: black;
    filter: drop-shadow(0.1em 0.1em 0.05em #6495ED);
  }
  11% {
    color: #6495ED;
    filter: drop-shadow(0.1em 0em 0.05em #6495ED);
  }
  13% {
    color: #C71585;
    filter: drop-shadow(-0.1em 0em 0.05em #6495ED);
  }
  15% {
    color: #6495ED;
    filter: drop-shadow(0em -0.1em 0.05em #6495ED);
  }
  17% {
    color: black;
    filter: drop-shadow(0.1em 0.1em 0.05em #6495ED);
  }
  19% {
    color: rgba(184, 134, 11, 1);
    filter: drop-shadow(0em 0em 0.05em #6495ED);
  }
  21% {
    font-size: 7em;
  }
  23% {
    color: rgba(184, 134, 11, 1);
    font-size: 7.5em;
  }
  25% {
    filter: drop-shadow(0.02em -0.02em 0.01em rgba(100, 149, 237, 1));
  }
  100% {
    color: rgba(184, 134, 11, 1);
    font-size: 7.5em;
    filter: drop-shadow(0.02em -0.02em 0.01em rgba(100, 149, 237, 1));
  }
}
    <div id="container">
  <h1>Cyberpunk</h1>
</div>

    • 4

相关问题