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

【问题标题】：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 中并制作这样的动画。仅用于视频背景。

【问题讨论】：

标签： html css animation html5-video css-animations

【解决方案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);
    }
}

【讨论】：