html - 具有 CSS 动画的多个背景

Question

我在 CSS 中使用了多个背景(一个是公司背景，另一个是员工)。

这是我的代码:

background: url("../../images/andy.png"),url("../../images/background.png") no-repeat top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

这很好用，但我想为第一个背景参数设置动画和其他 CSS 选项 (url("../../images/andy.png"))。

有没有可能的方式来引用它？这又不是它自己的元素，那怎么可能呢？

这是我的 HTML

<section id="intro" class="main style1 dark fullscreen">
    <div class="content container 100% 12u(mobile)">
        <header>
            <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div>
        </header>
        <div style="width:40%;margin-right:auto;margin-left:auto;">
            <p style="width:100%; margin-right:0; margin-left:0;"><i>“sometext”.</i></p>
        </div>
        <footer>
            <a href="#work" class="button style2 down">More</a>
        </footer>
    </div>
</section>

Answer 1

首先:

你的 JSFiddle 有点过于复杂，动画在错误的元素上等等。

为了清楚起见，我删除了 HTML 中不必要的元素。

这是一个更新的 JSFiddle，它显示了您想要的效果 https://jsfiddle.net/6nstfftn/4/

阅读 CSS 动画!

我强烈建议研究 CSS 动画。我在 YouTube 上关注了一个人，他非常棒。他有一些很棒的教程 - 非常值得一看。

找到他:https://www.youtube.com/devtipsfordesigners

他最近制作了一个系列，其中包含一些关于 CSS 过渡/动画/效果等的视频。看看吧。

---

要采取的步骤:

1. 让你的 #index 元素的 position: relative;
2. 为 :before 和 :after 添加伪元素，设置它们的 position: absolute; 和它们的 top、bottom、left 和 right 到 0(基本上使它们填充其“父级”的宽度和高度“元素)。 确保设置content: ''，否则它们将没有大小!
3. 然后，对于伪元素，设置 background-image，并设置 z-index 以正确地对它们进行分层 - 您可以按任何顺序放置它们喜欢
4. 为每个“背景”设置“默认”样式 - 因此，如果您希望它以 0 不透明度(淡入)开始，请执行此操作；同样，如果您希望它移动，请将其移动到“开始”位置:TL;DR - 如果将元素设置为“结束”位置，您可能会在动画开始之前看到元素出现并闪烁 -此外，如果该属性未在 CSS 中定义，则动画可能不知道它的开头是什么
5. 使用@keyframes animationName创建动画，使用from和to设置动画的开始和结束属性
6. 将 transition 属性应用于每个“背景”以实现平滑
7. 将 animation 属性应用到每个背景，设置要使用的每个 @keyframes 的名称。设置一个持续时间，并使用forwards保持动画的结束状态
8. 坐下来享受一杯热饮

---

这是 CSS 的片段:

#intro {
  position: relative;
}

#intro:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("http://i65.tinypic.com/2woc2o5.png") no-repeat top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -2;
  transition: all 0.5s ease-in-out;
  animation: background 0.5s forwards;
  opacity: 0;
}

#intro:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("http://i65.tinypic.com/2mn0w8j.png") no-repeat top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
  transition: all 0.5s ease-in-out;
  animation: andy 1s forwards;
  transform: translateX(-100%);
}

@keyframes andy{
  from { transform: translateX(-100%); }
  to { transform: translateX(0%); }
}

@keyframes background {
  from { opacity: 0; }
  to { opacity: 1; }
}

在我的示例中，我没有包含针对transition、animation、transform 等供应商特定的扩展。显然，您可以添加这些都是您自己的兼容性。

---

我强烈建议研究 CSS 动画以获得所需的效果。

实际上有数百个(如果不是数千个)。

有任何问题，尽管问!

希望这有帮助:)