从全屏到手机动画的Apple iphone 11 pro视频

问题描述

@H_404_0@我正在尝试复制类似的Apple动画，其中从全屏视频中滚动时将其缩小，并显示出它实际上是手机的屏幕。我正在谈论的动画是在Iphone 11 pro网站上（那个家伙被砸的视频）。

@H_404_0@我尝试使用Apple版本来创建动画时没有运气。因此，我想到了拥有黑屏手机id="black-screen-phone"，口罩mask-image: url('/Assets/mask/mask-phone.svg'); 和video的版本。

@H_404_0@使用这种方法，我在将视频安装在手机屏幕上时取得了不错的效果。但是，现在我试图从全屏视频开始滚动，并到达我现在平稳的位置（与Iphone动画相同）

@H_404_0@如果将视频宽度增加到100vw，我尝试使用该方法，但是在这种情况下，左侧的遮罩会产生边距。

---

HTML code

 <div id="full-screen-section" class="full-screen-section">
    <div class="container-fluid h-100">
      <div class="row h-100 justify-content-center align-items-center flex-row ">

        <di id="trigger-filter" class="phone-orizontal">

            <img id="black-screen-phone" src='/Assets/mask/black-phone-screena.png'>
          



            <video id="video-blur" class="" src="/Assets/video/video.mp4  " autoplay muted
              loop></video>
         
          <span>Full Screen/size View</span>
      </div>
    </div>

  </div>

CSS
.full-screen-section{
    height: 200vh;
    background-color: black;
    position: relative;
    span{
    color: white;
    position: absolute;
    font-size: 4vw;
    position: absolute;
    top: 100%;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    // background-color: blue;
    }
   
 }
.phone-orizontal{ position: absolute;
    top: 40%;
    margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
img{
    width: 65vw;
}


}
#video-blur{    position: absolute;
    // top: -9%;
    top: -9%;
    width:  65vw;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    filter: blur(10px);
    transition: 2s;
}
#video-blur.un-blur{
    filter: blur(0px);
    transition: 2s;
}


//Second test- 

    #video-blur{
  
        display: block;
        width:  65vw;
        transition:5s;
        -webkit-mask-image: url('/Assets/mask/mask-phone-svg.svg');
        mask-image: url('/Assets/mask/mask-phone-svg.svg');
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

@H_404_0@

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）