场景描述：网页背景是一个视频，外面一层是一个图案，图案中间是透明的，周围是白色的，当用户往下滑的时候外面一层会放大显示里面的那层盒子的内容。再往商滑的时候会缩小回去。具体怎么实现这一个动画效果。

这个动画效果可以通过CSS3的transform属性和JavaScript结合实现。以下是一个简单的实现思路：

1. 设置背景视频和图案的CSS样式，其中图案需要设置为绝对定位，并设置宽高和中心点，以便于后续的缩放和旋转操作。

2. 当用户下拉页面时，通过JavaScript监听滚动事件，计算滚动距离，根据滚动距离动态修改图案的transform属性，使其放大并显示里面的内容。

3. 当用户继续下拉页面时，通过JavaScript监听滚动事件，计算滚动距离，根据滚动距离动态修改图案的transform属性，使其缩小回到原始状态。

下面是一个简单的实现代码示例：

HTML:

<div class="background">
  <video src="background.mp4" autoplay loop muted></video>
  <div class="pattern">
    <div class="content">
      <!-- 这里放置里面的内容 -->
    </div>
  </div>
</div>

CSS:

.background {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.pattern {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid white;
  border-radius: 50%;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 这里设置内容的样式 */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript:

var pattern = document.querySelector('.pattern');
var content = document.querySelector('.content');

window.addEventListener('scroll', function() {
  var scrollTop = window.scrollY;

  // 下拉页面放大图案
  if (scrollTop > 0 && scrollTop <= 200) {
    var scale = 1 + (scrollTop / 200) * 0.5;
    var rotate = (scrollTop / 200) * 45;
    pattern.style.transform = 'translate(-50%, -50%) scale(' + scale + ') rotate(' + rotate + 'deg)';
    content.style.opacity = (scrollTop / 200);
  }

  // 继续下拉页面缩小图案
  if (scrollTop > 200 && scrollTop <= 400) {
    var scale = 1 + ((400 - scrollTop) / 200) * 0.5;
    var rotate = ((400 - scrollTop) / 200) * 45;
    pattern.style.transform = 'translate(-50%, -50%) scale(' + scale + ') rotate(' + rotate + 'deg)';
    content.style.opacity = ((400 - scrollTop) / 200);
  }
});

注意：由于这个动画效果比较复杂，代码示例只是一个简单的实现思路，并不完整，还需要根据具体的需求进行调整和优化。