从中心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>