无法让我的灵活动画背景反射工作

好吧，所以我四处寻找了一个loooong并摆弄了一下，我似乎无法让它工作。据我所知，我无法将 css 反射添加到背景中，我正在使用背景图像属性来创建动画 BG。我希望BG反射到我的表面上，这是一个放置在BG上方并设置为较低不透明度的DIV框。为了使用两个不同的背景图像属性创建反射im，一个在另一个下面，图像反转和完全相同的动画。

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

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

注意，我刚刚从谷歌上随机扔了一个bg，这样人们可以看到它。在动画中，它将翻转 180 度以模拟反射。**

编辑：演示小提琴

.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>

任何帮助将不胜感激！

如果您使用两个不同的动画，并且有两个不同的图像（一个是另一个的反射），这应该可以工作：更新的小提琴

主要键是调整下部图像容器的高度，因此它不会与顶部div 重叠。将其设置为 height: 30% ，然后将 bg 图像附加到第一个div 的底部和第二个div 的顶部，并具有等效的动画似乎可以做到这一点。

现在有animatedBgTop和animatedBgBottom关键帧集。

相关内容

最新更新

热门标签：