沉浸式体验：打造Apple官网AirPods Pro动效

前端

2023-09-28 05:39:52

发布会的第二天，我就看到部门的妹纸在看新出的AirPods Pro，还说道： “这个官网做的真好看，很有科技感！苹果的程序员就是厉害！”；

其实，打造类似Apple官网的动效并不难。在本指南中，我们将使用CSS3、HTML和JavaScript来创建令人惊叹的交互式体验，让你在自己的网站上重现AirPods Pro的动感。

1. 准备工作

首先，你需要准备以下工具：

代码编辑器或IDE
现代网络浏览器
Apple AirPods Pro官网链接（https://www.apple.com/airpods-pro/）

2. 创建HTML结构

我们将使用一个简单的HTML结构来容纳我们的动效：

<div class="airpods-container">
  <div class="airpods">
    <div class="airpod-left"></div>
    <div class="airpod-right"></div>
  </div>
</div>

这个结构创建了一个容器，用于容纳AirPods，其中包括左右AirPods。

3. 添加CSS样式

接下来，我们需要添加一些CSS样式来设置AirPods的外观和位置：

.airpods-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #f2f2f2;
}

.airpods {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.airpod-left {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

.airpod-right {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

这些样式定义了一个容器，用于容纳AirPods，并设置了AirPods的大小、位置和颜色。

4. 添加CSS3动效

现在，让我们添加一些CSS3动效来让AirPods动起来：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.airpods {
  animation: rotate 10s infinite linear;
}

这些动画使AirPods以指定的持续时间和方向旋转。

5. 添加交互性

为了让动效更具交互性，我们将添加一些JavaScript代码来响应用户的交互：

const airpodsContainer = document.querySelector(".airpods-container");

airpodsContainer.addEventListener("mousemove", (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;

  const rotationX = -20 * (x - 0.5);
  const rotationY = -20 * (y - 0.5);

  airpodsContainer.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
});