科幻大片般炫酷！用原子化CSS轻松打造黑客帝国代码雨

2023-11-28 04:41:01

黑客帝国中炫酷的代码雨效果

还记得《黑客帝国》中那标志性的代码雨效果吗？如今，你也可以通过原子化CSS和anime.js轻松实现这种效果，让你的页面看起来像极了黑客帝国中的场景。

准备工作

在开始之前，你需要确保已经安装了Node.js和npm。你还可以使用在线代码编辑器，如CodePen或CodeSandbox。

使用原子化CSS创建代码雨

首先，你需要创建一个新的CSS文件，并添加以下代码：

body {
  background-color: black;
  color: green;
  font-family: monospace;
}

.code-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.code-rain span {
  position: absolute;
  top: -20px;
  left: random(0, 100%);
  font-size: 16px;
  animation: fall 10s infinite linear;
}

@keyframes fall {
  0% {
    top: -20px;
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

使用anime.js添加动画效果

接下来，你需要创建一个新的JavaScript文件，并添加以下代码：

const codeRain = document.querySelector('.code-rain');
const codeRainSpans = document.querySelectorAll('.code-rain span');

// 创建一个新的anime实例
const anime = anime({
  targets: codeRainSpans,
  translateX: function() {
    return Math.random() * 100;
  },
  easing: 'linear',
  duration: 10000,
  delay: function(el, i) {
    return i * 100;
  },
  loop: true
});