2014-04-03 55 views
0

好吧,所以我搜索了周圍的loooong,並擺弄這個和我似乎無法得到它的工作。據我所知,我不能將css反射添加到背景中,而我正在使用background-image屬性創建動畫BG。我希望BG能反射到我的表面上,這是一個放在BG上方的DIV盒子,並設置在較低的不透明度上。爲了創建使用兩個不同背景圖像屬性的反射im,一個在另一個下方,圖像反轉並且具有完全相同的動畫。不能讓我的靈活的動畫背景反射工作

問題:當瀏覽器窗口改變高度尺寸時,底部動畫不會以與頂部一致的方式移動,看起來像一個反射(我基本上希望圖像中的兩個點都連接並保持排隊被溢出中斷的圖像:隱藏功能)

有沒有什麼辦法可以做到這一點?或者讓背景從頂部開始切割,而不是反射所連接的底部,所以它始終對齊?或者也許我只是繞了錯誤.....

注意我只是在隨機BG關扔谷歌這樣的人能看到它。在動畫中它會翻轉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> 

任何幫助,非常感謝!

+0

你可以嘗試使用after psuedo選擇器並在那裏使用高度+額外的背景圖像。你不得不在手前翻轉圖片/反射...但是這可能奏效。在電話上,所以演示比正常情況困難。 – dward

+0

這裏有一篇文章就在這裏:http://designshack.net/articles/css/mastering-css-reflections-in-webkit/。 – dward

+0

即時通訊的問題是,我無法對我的元素應用簡單的反射,因爲它的背景動畫,而不是我的div中的實際存在的東西,否則它確實是一個相當簡單的修復與文章描述的屬性。 – Eolis

回答

0

如果您使用兩個不同的動畫,並有兩個不同的圖像(一個接一個的反射)這應該工作:Updated Fiddle

主要的關鍵是調整你的下圖像容器的高度,所以:這不是什麼t與頂部div重疊。將其設置爲height: 30%,然後將bg圖像附加到第一個div的底部和第二個的頂部,並具有等效的動畫似乎可以做到這一點。

現在有animatedBgTopanimatedBgBottom關鍵幀集。

+0

謝謝!實際上,我昨晚想到了它,做了類似的事情,但那正是這個想法。我也一定要玩這個。 – Eolis