从中心 jQuery/GSOP 淡出圆形层

Question

我创建了两层 div，一层带有背景图像，另一层带有淡出的黑色层，似乎还可以，但要求有点不同，淡出层应该从中心（圆圈）开始，按照下面的例子：

这是我创建的，JSfiddle Demo

任何人都可以建议如何实现圆形居中淡出，而不是我创建的那个吗？我在我的项目中使用了 greensock。

请推荐

$(document).ready(function() {
  var videoFade = $(".fade-layer");
  TweenMax.to(videoFade, 14, { x:0 , opacity:0 , ease:Power1.easeInOut ,repeat:-1  });
});

.layer-one{
  background:url(https://i.imgsafe.org/90203acca5.jpg); 
  background-size:cover; 
  background-position:center; 
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index:1;
}
.fade-layer{
  background:rgba(0,0,0,1); 
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index:2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div class="layer-one"></div>
<div class="fade-layer"></div>

Answer 1

我并没有真正使用过GASP，但我能够创建一个快速演示，您可以使用box-shadow 来做这些事情。你可以用它来实现你想要做的事情。检查这个小提琴：https://jsfiddle.net/1uzj2v5L/4/

$(document).ready(function() {
var videoFade = $(".fade-layer");
    TweenMax.to(videoFade, 5, { x:0 , opacity:0.5 , ease:Power1.easeInOut ,repeat:-1,
    boxShadow:"0px 0px 0px 0px rgb(0,0,0) inset;"});

  });

Answer 2

似乎您可以使用单个元素作为背景，使用伪元素作为黑色叠加层，使用 radial-gradient() 创建叠加层圆圈，并使用 CSS 动画淡化叠加层。

这是一个演示。

div, div:after {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
div {
  background: url(https://i.imgsafe.org/90203acca5.jpg);
  background-size: cover;
  background-position: center;
}
div:after {
  content: '';
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, black 100%);
  animation: fadeOut 10s forwards;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

<div></div>