CSS3实现卡片晃动效果

今天带来的这段代码实现了在一个图片上增加一个时间倒计时的功能，并且当鼠标移动时，倒计时板块会产生晃动效果。具体实现方式是利用JavaScript计算剩余时间并将其显示在界面上，同时添加鼠标移动事件以及CSS样式来实现晃动效果。

具体使用代码：

<div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="填写图片地址">
          <div class="countdown">
            <div class="days"></div>
            <div class="hours"></div>
            <div class="minutes"></div>
            <div class="seconds"></div>
          </div>
        </div>
        <div class="flip-card-back">
          <img src="填写图片地址">
        </div>
      </div>
    </div>
    <style>
.countdown {
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: white;
}
.countdown > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  transform: rotate(90deg);
}
.days, .hours, .minutes, .seconds {
  width: 40px;
  height: 40px;
  background: #24242430;
  border-radius: 50%;
}
.time-number {
  font-size: 18px;
}
.time-label {
  font-size: 8px;
}
    </style>
    <script>
    // 获取卡片容器元素
    const flipCard = document.querySelector('.flip-card');
    // 当鼠标悬停在卡片上时，将其翻转到背面
    flipCard.addEventListener('mouseenter', () => {
      flipCard.querySelector('.flip-card-inner').style.transform = 'rotateY(180deg)';
    });
    // 当鼠标离开卡片时，将其翻回正面
    flipCard.addEventListener('mouseleave', () => {
      flipCard.querySelector('.flip-card-inner').style.transform = 'rotateY(0deg)';
    });
    </script>
    <style>
    /* 卡片容器 */
	.flip-card {
	  perspective: 1000px;
	  width: 500px;
	  height: 400px;
	  margin: 0 auto;
	}
	.flip-card img {
	  width: 100%;
	  height: 100%;
	  object-fit: contain;
	}
    /* 卡片容器内部的两个面 */
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    /* 正面 */
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    /* 背面初始状态为翻转90度 */
    .flip-card-back {
      transform: rotateY(180deg);
    }
    </style>
    <script>
    // 获取倒计时容器元素和时间标签元素
    const countdown = document.querySelector('.countdown');
    const daysEl = document.querySelector('.days');
    const hoursEl = document.querySelector('.hours');
    const minutesEl = document.querySelector('.minutes');
    const secondsEl = document.querySelector('.seconds');
    // 设置活动结束时间
    const endDate = new Date('2023-06-30T18:00:00Z').getTime();
    // 更新剩余时间并显示在界面上
    function updateCountdown() {
      const now = new Date().getTime();
      const distance = endDate - now;
      // 计算天、小时、分钟和秒
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      // 将剩余时间显示在界面上
      daysEl.innerHTML = `<div class="time-number">${days}</div><div class="time-label">天</div>`;
      hoursEl.innerHTML = `<div class="time-number">${hours}</div><div class="time-label">时</div>`;
      minutesEl.innerHTML = `<div class="time-number">${minutes}</div><div class="time-label">分</div>`;
      secondsEl.innerHTML = `<div class="time-number">${seconds}</div><div class="time-label">秒</div>`;
      // 在倒计时容器上添加晃动效果
      const x = (window.innerWidth / 2 - event.clientX) / 10;
      const y = (window.innerHeight / 2 - event.clientY) / 10;
      countdown.style.transform = `translate(-50%, -50%) rotateX(${y}deg) rotateY(${x}deg)`;
    }
    // 每秒更新一次剩余时间
    setInterval(updateCountdown, 1000);
    </script>

代码解释：

使用CSS样式设置卡片容器的透视度（perspective）和卡片内部的两个面的布局。

    .flip-card {
      perspective: 1000px;
    }
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .flip-card-back {
      transform: rotateY(180deg);
    }

使用JavaScript监听卡片容器的鼠标移入和移出事件，并根据事件触发的情况修改卡片内部的transform属性来实现翻转效果。

    const flipCard = document.querySelector('.flip-card');
    flipCard.addEventListener('mouseenter', () => {
      flipCard.querySelector('.flip-card-inner').style.transform = 'rotateY(180deg)';
    });
    flipCard.addEventListener('mouseleave', () => {
      flipCard.querySelector('.flip-card-inner').style.transform = 'rotateY(0deg)';
    });

当鼠标移入时，通过querySelector方法获取卡片内部的元素，然后将它的transform属性设置为”rotateY(180deg)”，这样就可以让卡片翻转并显示背面内容了。当鼠标移出时，同样获取元素并将属性设置为”rotateY(0deg)”来使卡片翻转回正面。