使用 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;
}

并使用这种补间：

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

你可以使用一个圆框并重新缩放它

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);

<div>
</div>