html鼠标滚动切换动画

可以使用 jQuery 库来实现鼠标滚动切换动画。具体实现步骤如下：

1. 在 HTML 中定义需要切换的内容块，例如：

<div id="section1" class="section">内容块1</div>
<div id="section2" class="section">内容块2</div>
<div id="section3" class="section">内容块3</div>

2. 在 CSS 中设置内容块的样式，例如：

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  color: #fff;
  transition: transform 0.5s ease-in-out;
}

3. 在 JavaScript 中使用 jQuery 监听鼠标滚动事件，判断滚动方向，并根据滚动方向计算需要切换到的内容块的索引，然后使用 CSS 的 `transform` 属性将页面滚动到对应的内容块位置，例如：

$(document).on('mousewheel', function(e) {
  var delta = e.originalEvent.deltaY;
  var currentIndex = $('.section.active').index();
  var nextIndex = currentIndex + (delta > 0 ? 1 : -1);
  var $nextSection = $('.section').eq(nextIndex);

  if ($nextSection.length !== 0) {
    $('.section').removeClass('active');
    $nextSection.addClass('active');
    var translateY = -nextIndex * 100;
    $('.sections-container').css('transform', 'translateY(' + translateY + 'vh)');
  }
});

其中，`.active` 类用于标记当前激活的内容块，`.sections-container` 是包含所有内容块的容器。

4. 在 HTML 中定义一个名为 `.sections-container` 的容器，用于包含所有内容块，例如：

<div class="sections-container">
  <div id="section1" class="section active">内容块1</div>
  <div id="section2" class="section">内容块2</div>
  <div id="section3" class="section">内容块3</div>
</div>

这样就完成了鼠标滚动切换动画的实现。