从中心淡出圆形图层 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 做什么。你可以用它来实现你想要做的事情。检查此 fiddle：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>

从中心淡出圆形图层 jQuery/GSOP

Fade out circle layer from center jQuery/GSOP

html

javascript

css

jquery

gsap