html跟随背景颜色

如果你想让 HTML 页面中的文本颜色跟随背景颜色改变，可以使用 CSS 的 `mix-blend-mode` 属性。具体做法是：

1. 在 CSS 中设置背景颜色：

body {
  background-color: #000;
}

2. 在 CSS 中设置文本颜色为白色：

body {
  background-color: #000;
  color: #fff;
}

3. 使用 `mix-blend-mode` 属性将文本颜色设置为 `difference`：

body {
  background-color: #000;
  color: #fff;
  mix-blend-mode: difference;
}

这样，在背景颜色改变时，文本颜色也会跟随改变，形成一个有趣的效果。不过需要注意的是，`mix-blend-mode` 属性并不被所有浏览器支持，需要根据实际情况进行兼容处理。

相关问题

背景色跟随鼠标变化gsap

在GSAP (GreenSock Animation Platform) 中，如果你想创建一个背景颜色随着鼠标位置变化的效果，你可以利用CSS动画配合JavaScript事件监听。首先，你需要设置初始的CSS样式，然后使用GSAP的TweenMax库来控制背景色的变化。

以下是一个简单的示例：

1. HTML部分：

<div id="myElement" style="width: 200px; height: 200px; background-color: #ccc;"></div>

2. CSS部分（可以包含在外部文件或`<style>`标签中）：

#myElement {
  position: relative;
}

3. JavaScript / GSAP部分：

const myElement = document.getElementById('myElement');
let initialColor = 'initial';

// 使用TweenMax监听鼠标移动事件
myElement.addEventListener('mousemove', function(event) {
  const rect = myElement.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 创建一个颜色渐变，比如从白色到透明度渐变
  let color = `rgba(0, 0, 0, ${Math.min(x / rect.width, 1)})`;

  // 如果需要平滑过渡效果，可以添加TweenMax动画
  if (color !== initialColor) {
    TweenMax.to(myElement.style, 0.5, { backgroundColor: color });
    initialColor = color;
  }
});

// 当鼠标离开元素时恢复初始颜色
myElement.addEventListener('mouseleave', function() {
  TweenMax.to(myElement.style, 0.5, { backgroundColor: initialColor });
});

这个例子中，背景颜色会随鼠标在元素内的x坐标变化而逐渐变为黑色（或透明）。当鼠标离开时，颜色会回到初始状态。