Question

我想创建一个技能动画图。

您可以在此处查看示例：http://jsfiddle.net/aoxyLtLe/9/

以上示例使用3种技能，但实际上我将使用11种技能

为了将它们（#skills>div:nth-child(1) div＆amp; #skills>div:nth-child(2) span）均匀地展开，我使用花车。绝对定位每个元素，然后尝试将它们均匀地分散，显然需要很长时间。

我希望#skills>div:nth-child(1) div的高度从下到上动画。

目前情况并非如此，因为我使用花车并且它们无法相对于底部放置以实现从下到上的动画。

CSS：

#skills {
    position: absolute;
    width: 410px;
    height: 455px;
    top: 0px;
    left: 10px;   
}

#skills>div:nth-child(1) {
    float: left;
    height: 400px;
    display: table;
    width: auto;
    table-layout: fixed;
    margin-left: 31px;
    margin-top: 44px;
}

#skills>div:nth-child(1) div {
    position: relative;
    width: 77px;
    height: 0;
    background-color: #0597BE;
    display: table-cell;
    text-align: center;
    float: left;
    margin: 0px 12px;
}
#skills>div:nth-child(2) {
    float: left;
    display: table;
    width: 303px;
    table-layout: fixed;
    margin-left: 31px;
}
#skills>div:nth-child(2) span {
    font-family: myriad pro;
    font-size: 15px;
    color: #0597BE;
    display: table-cell;
    text-align: center;
}

HTML：

<div id="skills">
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>Javascript</span>        
    </div>
</div>

JS：

$('#skills>div:nth-child(1) div').eq(0).animate({
    height: 360
});

$('#skills>div:nth-child(1) div').eq(1).animate({
    height: 120
});

$('#skills>div:nth-child(1) div').eq(2).animate({
    height: 200
});

你能想到我的问题的解决方案能够实现从底部到顶部的动画，同时在x轴上均匀地展开所有相关元素吗？

谢谢！

Answer 1

我想你想要这样的东西

Js Fiddle

对您的CSS进行了一些更改

    #skills {
        position: absolute;
        width: 410px;
        height: 455px;
        top: 0px;
        left: 10px;   
    }


    #skills>div:nth-child(1) {
        float: left;
        height: 400px;
        display: table;
        width: auto;
        table-layout: fixed;
        margin-left: 31px;
        margin-top: 44px;
        width:100%;
    }

    #skills>div:nth-child(1) div {
        position: absolute;
        width: 77px;
        height: 0;
        background-color: #0597BE;
        display: table-cell;
        text-align: center;
        float: left;
        margin: 0px 12px;
        bottom:50px;
    }
    #skills>div:nth-child(1) div:nth-child(1){
        left:40px;
        }
    #skills>div:nth-child(1) div:nth-child(2){
        left:138px;
        }
    #skills>div:nth-child(1) div:nth-child(3){
        left:239px;
        }
    #skills>div:nth-child(2) {
        float: left;
        display: table;
        width: 303px;
        table-layout: fixed;
        margin-left: 31px;
    }
    #skills>div:nth-child(2) span {
        font-family: myriad pro;
        font-size: 15px;
        color: #0597BE;
        display: table-cell;
        text-align: center;
    }

修改

检查更新的小提琴

JS Fiddle

旋转div将修复它并更改为

#skills>div:nth-child(1) div{ float:right /** from float left **/ }

在这种情况下，如何设置div的高度（从下到上）？

1 个答案: