如何制作具有三个动画部分的视频动画容器？

Posted 2023-03-04

【中文标题】如何制作具有三个动画部分的视频动画容器？

【英文标题】：How can I make the video animation container with three animated section?

【发布时间】：2022-01-11 20:17:12

【问题描述】：

我在 Dribble 网站上看到了这个动画！

https://dribbble.com/shots/14250770-Cargo-Logistics-Website-Navigation

所以只是为了训练我厌倦了制作这个带有视频背景的动画！但效果不好。

这是我的 html 和 css 代码：

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


section 
  position: relative;
  background-color: rgb(49, 69, 77);
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;


.video-container 
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;


.video 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;


.video video 
  width: 100%;
  height: 100%;
  object-fit: cover;


.block 
  position: relative;
  flex: 1;
  height: 100%;
  background-color: rgb(49, 69, 77);
  border-right: 1px solid #fff;
  z-index: 3;
  animation: animate 1.5s ease-in-out forwards;


.block:nth-child(3) 
  animation-delay: .5s;


.block:nth-child(4) 
  animation-delay: 1.5s;


.block:last-child 
  border-right: 0;


@keyframes animate 
  0% 
    height: 100%;
  
  100% 
    height: 0%;
  

<section>
  <div class="video-container">
    <div class="video">
      <video autoplay muted loop>
                    <source src="video.mp4" type="video/mp4" controls="false" />
                </video>
    </div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</section>

这个想法是如何使视频包含在三个 div 中并制作这样的动画。仅用于视频背景。

【参考方案1】：

我只使用 html 和 CSS 制作了这个动画，代码如下：

    <section class="animated-section">
        <div class="side">
            <video autoplay muted loop class="animated-video">
                <source src="../video.mp4" type="video/mp4" controls="false" />
            </video>
        </div>

        <div class="block left"></div>
        <div class="block middle"></div>
        <div class="block right"></div>

    </section>

* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;


section 
    position: relative;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    background-color: rgb(181, 181, 255);
    z-index: 1;
    overflow: hidden;


section .side 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;


section .side video 
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    animation: rot 1.7s ease-in-out forwards;


section .block 
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 4;
    width: 33.333333333%;
    height: 100%;
    background-color: rgb(181, 181, 255);
    animation: animate 1s ease-in-out forwards;


section .block.middle 
    left: 33.333333333%;
    animation-delay: .25s;


section .block.right 
    left: 66.666666666%;
    animation-delay: .5s;


@keyframes animate 
    0% 
        height: 100%;
    
    50% 
        transform: scale(1);
    
    100% 
        height: 0%;
        transform: scale(1);
    


@keyframes rot 
    0% 
        transform: scale(1.5) rotateZ(-10deg);
    
    100% 
        transform: scale(1) rotateZ(0deg);