纯css实现带拐角方向流动箭头

最新推荐文章于 2024-06-17 10:41:41 发布

weixin_33841503

最新推荐文章于 2024-06-17 10:41:41 发布

阅读量2.6k

点赞数 2

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/jingyao/blog/1553526

版权

2019独角兽企业重金招聘Python工程师标准>>>

图一是示意，图二是真实效果，动态加不上，只能用红箭头表示下了。。。。。。。。。。。

HTML代码：

<div class="pipecorner_arrows">
    <div class="pipeline_down_arrows position_left_bottom">
        <div class="arrow_down_arrows"></div>
    </div>
    <div class="pipeline_right_arrows position_bottom_left">
        <div class="arrow_right_arrows"></div>
    </div>
</div>

<!--拐角定位div-->
<div class="corner_box corner_box_left_bottom">
    <div class="corner_square"></div>
</div>

CSS代码：

/*向右流动箭头*/
.pipeline_right_arrows {
    width: 100%;
    height: 6px;/*图片height为4px，上下border各为1px*/
    border-top: 1px solid #1AB395;
    border-bottom: 1px solid #1AB395;
}

/*向下流动箭头*/
.pipeline_down_arrows {
    width: 6px;/*图片width为4px，上下border各为1px*/
    height: 100%;
    border-left: 1px solid #1AB395;
    border-right: 1px solid #1AB395;
}

.pipecorner_arrows .position_left_bottom {
    position: absolute;
    bottom: 6px;
    left: 0;
}

.pipecorner_arrows .position_bottom_left {
    position: absolute;
    bottom: 0;
    left: 6px;
}

/*初始化下箭头*/
.arrow_down_arrows {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../images/square_default_y.png") repeat-y 0 0;

    /*无限循环箭头动画效果*/
    animation: down_arrow_square_default 3s infinite linear;
    -moz-animation: down_arrow_square_default 3s infinite linear;
    -webkit-animation: down_arrow_square_default 3s infinite linear;
    -o-animation: down_arrow_square_default 3s infinite linear;
}

/*初始化右箭头*/
.arrow_right_arrows{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../images/square_default_x.png") repeat-x 0 0;
    
    /*无限循环箭头动画效果*/
    animation: right_arrow_square_default 3s infinite linear;
    -moz-animation: right_arrow_square_default 3s infinite linear;
    -webkit-animation: right_arrow_square_default 3s infinite linear;
    -o-animation: right_arrow_square_default 3s infinite linear;
}

@keyframes down_arrow_square_default {
    0% {
        background: url("../images/square_default_y.png") repeat-y 0 0;
    }

    100% {
        /*图片height为8px，两个图片错开，以免卡顿，设置y为height的2倍，16px*/
        background: url("../images/square_default_y.png") repeat-y 0 16px;
    }
}

@keyframes right_arrow_square_default {
    0% {
        background: url("../images/square_default_x.png") repeat-x 0 0;
    }
    100% {
        background: url("../images/square_default_x.png") repeat-x 16px 0;
    }
}

/*拐角方块定位*/
.corner_box {
    width: 6px;
    height: 6px;
    position: absolute;
}

.corner_box_left_bottom {
    bottom: 0;
    left: 0;
}

.corner_box .corner_square {
    width: 6px;
    height: 6px;
    background: #1AB395;
}