0

我需要制作一个看起来像一副纸牌的页面。单击卡片时，卡片会翻转并显示有关它的详细信息。我已经使用 jquery 实现了翻转动画。但我需要翻转和增长卡片，因为细节内容很大。到目前为止我所做的动画有点太生涩了。这是我到目前为止所做的：

HTML：

<div class="flipbox-container0">
    <div class="flipbox0" onclick="flip()"> <span class="spans">Maturity Date</span>

    </div>
</div>
<div id="text1" style="display:none">
    <p style="margin-left:-2.25%; width:100%; background-color:#D5E04E; padding-bottom:10px; padding-left:22px; padding-top:10px;">Maturity Date</p>
    <p>Close</p>
    <p>A bond’s maturity date refers to a specific date in the future on which the investor’s principal will be repaid. Maturities can range from as little as one day to as long as 30 years. The length of a bond’s maturity often correlates to the bond’s risk factor. A bond that matures in one year will typically be less risky than one that matures in 20 years since there will be less price fluctuation in shorter maturities.
        <br />
        <br />Bonds are often referred to as being short-, medium- or long-term. Generally, a bond that matures in one to three years is referred to as a short-term bond, while medium-term bonds are generally those that mature in four to 10 years. Long-term bonds are typically those that mature in more than 10 years.
        <br />
        <br />Once the bond’s maturity is reached, the final interest payment and the original principal are paid to the investor.
    </p>
</div>

Javascript：

function flip()
{
    $(".flipbox0").flippy({
        color_target: "white",
        duration: "300",
        onMidway : function(){
            $(".flipbox0").width(500);
            $(".flipbox0").height(500);
            $(".flipbox1").hide();
            $(".flipbox2").hide();
            $(".flipbox3").hide();
            $("#text1").show();
        }
    });
}

CSS：

.flipbox0 {
    -webkit-transform: rotateY(0deg);
    opacity: 1;
    background-color: #D5E04E;
    background-position: initial initial;
    background-repeat: initial initial;
    width:250px;
    height:300px;
    border:3px solid #FF9900;
    border-radius:25px;
    z-index:1;
}
.spans {
    margin-left: 0%;
    margin-top: 80%;
    position: absolute;
    background-color: #FFF;
    top: -23%;
    width: 100%;
    text-align: center;
}
#text1 {
    margin-top: -35%;
    z-index: 2;
    position: absolute;
    width: 35%;
    margin-left: 1%;
    text-align: justify;
}

任何帮助，将不胜感激。提前致谢。

4

0 回答 0