用CSS+JS实现常见的动画效果，让网站动起来！

在网站开发中，动画效果可以提升用户体验和视觉吸引力。本文将分享如何使用CSS和JavaScript实现一些常见的动画效果，包括活动倒计时、轮播图以及通过flex box实现的百叶窗效果。

活动倒计时

活动倒计时是一个常见的动画效果，它可以帮助用户了解活动开始或结束的时间。使用CSS和JavaScript可以轻松实现这一效果。

首先，我们需要创建一个带有ID为"countdown"的元素，并为其设置一个特定的时间。然后，我们使用JavaScript定期更新元素的文本内容，显示剩余时间。

<div id="countdown"></div>

// 获取距离活动开始或结束的剩余时间
const timeRemaining = ...;

// 定期更新元素的文本内容
setInterval(() => {
  const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

  document.getElementById("countdown").textContent = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;

  timeRemaining -= 1000;
}, 1000);

轮播图

轮播图是另一种常见的动画效果，它可以自动滚动显示一组图片或幻灯片。使用CSS和JavaScript可以轻松实现这一效果。

首先，我们需要创建一个带有ID为"carousel"的元素，并为其设置一个特定的宽度和高度。然后，我们创建一组带有图片或幻灯片的子元素。最后，我们使用JavaScript设置一个定时器，定期切换子元素的可见性。

<div id="carousel">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />
</div>

// 获取轮播图元素
const carousel = document.getElementById("carousel");

// 获取轮播图中的图片元素
const images = carousel.querySelectorAll("img");

// 设置当前显示的图片索引
let currentImageIndex = 0;

// 设置定时器，定期切换图片
setInterval(() => {
  // 隐藏当前显示的图片
  images[currentImageIndex].style.display = "none";

  // 将当前图片索引加 1
  currentImageIndex++;

  // 如果当前图片索引超过图片总数，则重置为 0
  if (currentImageIndex >= images.length) {
    currentImageIndex = 0;
  }

  // 显示当前图片
  images[currentImageIndex].style.display = "block";
}, 5000);

百叶窗效果

百叶窗效果是一种通过flex box布局方式实现的动画效果，它可以将元素像百叶窗一样打开或关闭。使用CSS和JavaScript可以轻松实现这一效果。

首先，我们需要创建一个带有ID为"container"的元素，并为其设置一个flex布局。然后，我们创建一组带有内容的子元素。最后，我们使用JavaScript设置一个事件监听器，当用户单击容器时，切换子元素的可见性。

<div id="container">
  <div>内容 1</div>
  <div>内容 2</div>
  <div>内容 3</div>
</div>

// 获取容器元素
const container = document.getElementById("container");

// 获取容器中的子元素
const children = container.children;

// 设置容器的flex布局
container.style.display = "flex";
container.style.flexDirection = "row";
container.style.alignItems = "center";
container.style.justifyContent = "space-around";

// 设置子元素的flex布局
for (let i = 0; i < children.length; i++) {
  children[i].style.display = "flex";
  children[i].style.alignItems = "center";
  children[i].style.justifyContent = "center";
}

// 设置事件监听器，当用户单击容器时，切换子元素的可见性
container.addEventListener("click", () => {
  for (let i = 0; i < children.length; i++) {
    children[i].style.display = children[i].style.display === "none" ? "flex" : "none";
  }
});

这些只是使用CSS和JavaScript实现一些常见动画效果的几个示例。通过结合使用这两种技术，我们可以创建各种具有吸引力且交互式的动画效果，以增强网站的用户体验。