使用CSS刷卡/翻轉效果使用CSS

-1

我想弄清楚如何在本網站上看到的刷卡/翻轉效果：http://catalystconference.com/（在「我們的收藏夾」和類似的部分下）。這可以使用唯一的CSS來完成嗎？使用CSS刷卡/翻轉效果使用CSS

來源

2013-10-12 sigep23

（1）你有什麼實際試過？（2）如果你這樣做，你會告訴我們你的代碼到目前爲止？（最好在[JSFiddle]（http://jsfiddle.com）） – Terry

@Deekey不要發佈垃圾評論，試圖吸引注意力到你的答案。我們都可以看到你的答案。 – meagar

@Terry這裏是小提琴 - http://jsfiddle.net/sigep23/TTv4q/ 它很接近，但不是我正在尋找像我在我原來的帖子中引用的網站。 – sigep23

不要依賴文本縮進，因爲它會強制瀏覽器實際呈現您指定的負空間。相反，嘗試使用絕對定位和左/上/下/右屬性來幫助定位（並隨後顯示/隱藏）隱藏窗格。

對於您的HTML，我冒昧地在您的<div>中創建了兩個窗格：可見和隱藏窗格。

<div> 
    <p class="pane-visible">Visible pane.</p> 
    <p class="pane-hidden">Hidden pane.</p> 
</div>

CSS明智的，可見窗格被定位爲是，但隱藏窗格絕對定位（但相對於其父），其是100％關閉從頂部（因此位於在父容器的底部，但看不見）。訣竅是在父項被徘徊時將隱藏窗格的top屬性更改爲最高。動畫很容易用CSS3屬性完成：transition。

div { 
    overflow: hidden; 
    position: relative; 
    width: 300px; 
    height: 300px; 
} 
div > p[class|="pane"] { /* Targets element with the class "pane-" (notice the dash) */ 
    box-sizing: border-box; /* Forces width and height to be at 300px even with padding */ 
    padding: 1em; 
    width: 300px; 
    height: 300px; 
} 
    div > p[class*="hidden"] { 
     position: absolute; 
     top: 100%; 
     left: 0; 
     transition: all .25s ease-in-out; /* You might want to add vendor prefixes */ 
    } 
     div:hover > p[class*="hidden"] { 
      top: 0; 
     }

這裏是證明了概念我的小提琴：http://jsfiddle.net/teddyrised/TTv4q/2/

來源

2013-10-12 15:06:27 Terry

完美！非常感謝@Terry！ – sigep23

@ sigep23如果有幫助，請接受答案:) – Terry

使用CSS刷卡/翻轉效果使用CSS

回答

相關問題