Question

我正在试图弄清楚刷卡/翻转效果是如何完成的，如本网站所示：http://catalystconference.com/（在“我们的收藏夹”和类似部分下）。这可以仅使用CSS来完成吗？

Answer 1

不要依赖text-indent，因为它会强制浏览器实际呈现您指定的负空间。相反，请尝试使用绝对定位和左/上/下/右属性来帮助定位（并随后显示/隐藏）隐藏窗格。

对于您的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/

使用CSS刷卡/翻转效果

1 个答案: