JS+CSS实现炫酷光感效果

下面我将详细讲解“JS+CSS实现炫酷光感效果”的完整攻略。

准备工作

在开始实现炫酷光感效果之前，我们需要先准备好以下内容：

1. 一个包含至少一个元素的 HTML 页面
2. 具有光感特性的图片或其他媒体资源
3. 一些基本的 CSS 和 JavaScript 知识

实现方法

接下来，我们将通过以下步骤实现炫酷光感效果：

步骤一：在 HTML 文件中添加所需元素

首先，在 HTML 文件中添加一个元素作为光感效果的容器。例如：

<div id="my-container">
  <img src="my-image.jpg" alt="My Image" />
</div>

这个容器中包含了一个图片，可以根据实际需要进行修改。

步骤二：使用 CSS 设置基本样式

接下来，为容器设置一些基本样式，以便光感效果能够被正确地应用：

#my-container {
  position: relative;
}

#my-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上 CSS 代码中，我们为光感容器设置了相对定位，并使用伪类元素 ::before 创建一个与容器大小和位置相同的空元素，为后面的光感效果提供了一个可操作的基础。

步骤三：使用 JavaScript 实现光感效果

最后，使用 JavaScript 实现光感效果。下面是一个示例代码：

var container = document.getElementById("my-container");
container.addEventListener("mousemove", function (e) {
  var x = e.clientX / window.innerWidth;
  var y = e.clientY / window.innerHeight;
  container.style.setProperty("--mouse-x", x);
  container.style.setProperty("--mouse-y", y);
});

这段代码首先获取了光感容器的 HTML 元素，然后监听鼠标移动事件，并将当前鼠标的位置的横纵坐标除以窗口的宽高，得到一个 0 到 1 之间的值，并将其分别存储为 x 和 y。最后，通过 setProperty 方法将 x 和 y 存储为 CSS 变量。

步骤四：使用 CSS 设置光感效果

最后，在 CSS 文件中设置光感效果：

#my-container::before {
  background: radial-gradient(
    circle at var(--mouse-x, 0) var(--mouse-y, 0),
    transparent 10%,
    rgba(255, 255, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%
  );
}

以上 CSS 代码中，我们使用 radial-gradient 创建了一个径向渐变的背景效果。其中，渐变的圆心位置的横纵坐标分别使用了 var(--mouse-x, 0) 和 var(--mouse-y, 0)，这些变量的值在 JavaScript 代码中进行了设置。

示例

下面是使用代码环境 CodePen 所编写的两个示例（请将以下代码复制到 CodePen 中）：

示例一：光感效果图片

<div id="my-container">
  <img src="https://picsum.photos/id/100/500/300" alt="My Image" />
</div>

<style>
  #my-container {
    position: relative;
  }

  #my-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle at var(--mouse-x, 0) var(--mouse-y, 0),
      transparent 10%,
      rgba(255, 255, 255, 0.4) 20%,
      rgba(255, 255, 255, 0.1) 40%,
      transparent 60%
    );
  }

  #my-container img {
    display: block;
    width: 100%;
    height: auto;
  }
</style>

<script>
  var container = document.getElementById("my-container");
  container.addEventListener("mousemove", function (e) {
    var x = e.clientX / window.innerWidth;
    var y = e.clientY / window.innerHeight;
    container.style.setProperty("--mouse-x", x);
    container.style.setProperty("--mouse-y", y);
  });
</script>

示例二：光感效果文字

<div id="my-container">
  <h1>Awesome Title</h1>
  <p>Some amazing description here!</p>
</div>

<style>
  #my-container {
    position: relative;
    text-align: center;
    padding: 50px;
    background: linear-gradient(to bottom, #0e71dd, #0d589d);
    color: #fff;
  }

  #my-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle at var(--mouse-x, 0) var(--mouse-y, 0),
      rgba(0, 0, 0, 0.5) 5%,
      rgba(0, 0, 0, 0.2) 10%,
      transparent 50%
    );
    pointer-events: none;
  }

  #my-container h1 {
    font-size: 60px;
    margin: 0;
    letter-spacing: 4px;
  }

  #my-container p {
    font-size: 24px;
    margin-top: 20px;
  }
</style>

<script>
  var container = document.getElementById("my-container");
  container.addEventListener("mousemove", function (e) {
    var x = e.clientX / window.innerWidth;
    var y = e.clientY / window.innerHeight;
    container.style.setProperty("--mouse-x", x);
    container.style.setProperty("--mouse-y", y);
  });
</script>

以上就是“JS+CSS实现炫酷光感效果”的完整攻略，希望对你有帮助！