Question

好吧，所以我一直在周围寻找一个loooong，然后摆弄这个，我似乎无法让它工作。据我所知，我无法向背景添加css反射，我使用background-image属性来创建动画BG。我希望BG能够反射到我的表面上，这是一个放置在BG上方的DIV盒，并设置为较低的不透明度。为了使用两个不同的背景图像属性创建反射，一个在另一个之下，图像反转并且完全相同的动画。

问题：当浏览器窗口改变高度大小时，底部动画不会以与顶部一致的方式移动，看起来像一个反射（我基本上希望图像中的两个点连接并保持排列尽管图像被溢出切断：隐藏功能）

有什么方法可以做到这一点吗？或者背景刚开始从顶部切断而不是反射连接的底部，所以它始终对齐？或者也许我只是错了......

注意我只是随机扔掉谷歌，所以人们可以看到它。在动画中，它将被翻转180度以模拟反射。 * *

编辑：Demo fiddle

CSS

 * {
     padding: 0;
     margin: 0;
 }
 /*bg animation loop */
 @keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 /*if you have multiple things to position separate with a comma ex: : -200px 0px, 90px 80px,etc*/
 @-webkit-keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 @-ms-keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 @-moz-keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 #bgbox {
     position: absolute;
     top: 0;
     height:2000px;
     width: 2000px;
     max-width: 100%;
     max-height: 100%;
 }
 .bg {
     z-index: -20;
     position: fixed;
     top: 0;
     background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
     width: 100%;
     height: 70%;
     max-height: 70%;
     max-width: 100%;
     background-position: -200px 0px, 0px 0px, 0px 0px;
     background-repeat: repeat-x;
     animation: animatedBg 90s linear infinite;
     -ms-animation: animatedBg 90s linear infinite;
     -moz-animation: animatedBg 90s linear infinite;
     -webkit-animation: animatedBg 90s linear infinite;
     overflow: hidden;
 }
 .bg2 {
     z-index: -22;
     position: fixed;
     top: 30%;
     bottom: -0.2%;
     background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
     width: 100%;
     height: 100%;
     max-height: 100%;
     max-width: 100%;
     background-position: 0px 0px, 0px 0px, 0px 0px;
     background-repeat: repeat-x;
     animation: animatedBg 90s linear infinite;
     -ms-animation: animatedBg 90s linear infinite;
     -moz-animation: animatedBg 90s linear infinite;
     -webkit-animation: animatedBg 90s linear infinite;
     overflow: hidden;
 }
 /*bg animation loop end */
 #midground {
     position: fixed;
     bottom: 0;
     left: 0;
     height: 950px;
     max-height: 30%;
     width: 2000px;
     maxwidth: 100%;
     background-color: rgba(0, 0, 0, 0.71)
 }

这是HTML：

HTML

<body>
    <div id="bgbox">
        <div class="bg"></div>
        <div class="bg2"></div>
    </div>
    <div id="midground"></div>
</body>

非常感谢任何帮助！

Answer 1

如果您使用两种不同的动画，并且有两个不同的图像（一个是另一个的反射），这应该有效：Updated Fiddle

主键是调整下部图像容器的高度，因此顶部div没有重叠。将其设置为height: 30%，然后将bg图像附加到第一个div的底部和第二个div的顶部，并具有相同的动画似乎就可以了。

现在有animatedBgTop和animatedBgBottom个关键帧集。

不能让我灵活的动画背景反射工作

1 个答案: