2

下の画像に示すように、この画像を作成してアニメーション化する必要があります。これには実際に画像を使用するのではなく、 CSS3 を使用してこれを行う予定でしたborder-radius。したがって、以下の HTML と CSS が現在の場所です。

私が望むアニメーションは、矢印が下から現れ始め、流れに沿って上に移動し続け、矢印ポインターで最後まで流れで右に進むことです。しかし、どうすればこれができるのか本当にわかりません。ブラウザー IE8+、chrome、FF をサポートする必要があります。

HTML: 

<div class="years">
    <article>
        <figure>
            <div class="vrt-bar"></div>
            <div class="hrzt-bar"></div>
            <div class="arrow"></div>
        </figure>
    </article>
</div>

CSS:

.years article figure {
    height:auto;
    position:relative;
}
.years article figure .vrt-bar {
    width:34px;
    height:192px;
    behavior: url(css/PIE.htc);
    border-radius:25px 0 25px 25px;
    -webkit-border-radius: 25px 0 25px 25px;
    -moz-border-radius: 25px 0 25px 25px;
    float:left;
    background:#00b9d3;
    position:relative;

}
.years article figure .hrzt-bar {
    width:143px;
    height:32px;
    background:#00b9d3;
    margin-left:34px;
}
.years article figure .arrow {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #00b9d3;
    position:absolute;
    top:-10px;
    left:177px;

}

jsfiddle: http://jsfiddle.net/KgAe4/

誰でもこれについて助けてもらえますか？

ここに画像の説明を入力

4

1 に答える 1

7

これを試してみてください。以下の誰かが必要だと思います

ワーキングデモ1

私はあなたのcssを少し編集しました、そしてコード

$('.arrow-up').animate({
    'top': '-5px'
}, 1000, function () {
    $(this).addClass('arrow').removeClass('arrow-up');
    $('.arrow').animate({
        'left': '177px'
    }, 1000);
});

また

別のタイプはこちら

私はあなたのcssを少し編集しました、そしてコード

ワーキングデモ2

$(document).ready(function () {
    $('.arrow-up').animate({
        'top': '-10px'
    }, 1000, function () {
        $(this).addClass('arrow').removeClass('arrow-up');
        $('.arrow').animate({
            'left': '177px'
        }, 1000);
    });
    $('.vrt-bar').animate({'height':'192px'},1000,function(){
    $('.hrzt-bar').delay(80).animate({'width':'143px'},1000);
    });

});
于 2013-09-24T18:51:03.037 に答える