javascript - 使用 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(/image/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>