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 回答