使用TweenLite从中间到边缘径向淡入图像

Question

我有一张图片，见下文：

我想在我的页面上使用以下css绝对定位：

.bg-slide21-layer-3 {
    background-image: url('/images/slide21/bg_layer3.png');
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: none;
    height: 46vh;
    width: 78.5vw;
    z-index: -8;
    position: absolute;
    top: 0vw;
    right: 0;
    left: -0.5vw;
    opacity: 1;
 }

我想使用Tween使其从不透明度0开始，并从页面内部（点所在的位置）到边缘将其自身设置为动画。我不知道该怎么做。我无法在径向上找到方便。

直观地说，我试图为元素添加一个封面，因此HTML如下：

<div class='bg-slide21-layer-3-cover'>
    <div class='bg-slide21-layer-3'></div>
</div>

封面CSS如下：

.bg-slide21-layer-3-cover {
    width: 10%;
    height: 10%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    z-index: -5;
    opacity: 1;
}

并使用这种Tween：

TweenMax.to(
        $('.bg-slide21-layer-3-cover'), 
        2, 
        { opacity: 1, width: "100vw", height: "100vh", ease:Power1.easeNone }
    );

意图使中间的小div向外扩展。但是，这不起作用，因为我的内部图像（.bg-slide21-layer-3）相对于中间的封面div绝对定位，所以效果看起来就像从左下方淡入角。

有谁知道如何正确地做到这一点？我如何将内部div相对于身体而不是封面div定位，以便随着封面尺寸的增加，看起来图像从中间逐渐消失？

感谢。

Answer 1

您可以使用圆形框并重新缩放

＆＃13;

＆＃13;

div {
  position:relative;
  background-repeat: none;
  height: 46vh;
  width: 78.5vh;
  overflow:hidden;
  border:solid;
}
div:before {
  position:absolute;
  content:'';
  display:block;
  height:25%;
  width:15%;
  top:70%;
  left:57%;
 background-image: url(https://i.stack.imgur.com/mhs0G.png);
  background-size: 650% 400%;
  background-position: 67% 93%;
  transition:1s linear;
  border-radius:100%;
  
}
div:hover:before {
  background-size:100% 100%;
  height:100%;
  width:100%;
  top:0;
  left:0
}
body {background:linear-gradient(to top left, lightgray, white,gray);

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;