鼠标滑动时，内容快增加滑入的效果

为了在浏览到每一个块时增加交互效果，你可以使用JavaScript和CSS来实现。

以下是一个示例，演示如何为网站首页的每一个块添加交互效果：

HTML 结构：

<div class="block" id="product">
  <!-- 产品内容 -->
</div>

<div class="block" id="news">
  <!-- 新闻资讯内容 -->
</div>

<!-- 其他块 -->

CSS 样式：

.block {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block.active {
  opacity: 1;
}

JavaScript 代码：

// 获取所有块元素
var blocks = document.querySelectorAll('.block');

// 遍历每一个块元素
blocks.forEach(function(block) {
  // 当块元素进入可视区域时添加 active 类
  window.addEventListener('scroll', function() {
    var blockPosition = block.getBoundingClientRect();
    var windowHeight = window.innerHeight;
    
    if (blockPosition.top < windowHeight * 0.8) {
      block.classList.add('active');
    }
  });
});

在上述代码中，我们首先使用CSS将每一个块的初始透明度设置为0，并使用过渡效果来实现渐变动画。通过添加 .active 类，我们可以将透明度设置为1，从而使块元素在浏览到时逐渐显示。

然后，使用JavaScript获取所有块元素，并为每个块元素添加滚动事件监听器。当每个块元素进入可视区域的80%时（可以根据需要自定义），我们添加 .active 类来触发动画效果。

根据你的实际需求，可以修改样式和JavaScript代码来适应不同的交互效果和触发条件。