css3 H5箭头

1.html

<style>
 /*箭头 开始*/
@-webkit-keyframes start {
    0%,30% {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(-8px);
    }
}

@keyframes start {
    0%,30% {
        opacity: 0;
        transform: translateY(10px);
    }

    60% {
        opacity: 1;
        transform: translate(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.u-arrow-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 150;
    width: 24px;
    height: 14px;
    margin-left: -7px;
}

.pre-wrap-bottom {
    width: 24px;
    height: 14px;
    position: relative;
    -webkit-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}

.pre-box1,.pre-box2 {
    height: 15px;
    width: 11px;
    position: absolute;
    top: -5px;
    overflow: hidden;
}

.pre-box2 {
    left: 10px;
}

.pre1 {
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    left: 1px;
}

.pre1,.pre2 {
    background-color: #fff;
    width: 14px;
    height: 5px;
    border-radius: 2px;
    position: absolute;
    box-shadow: 1px -1px 1px #646464;
    top: 5px;
}

.pre2 {
    left: -4.5px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}
/*箭头 结束*/
</style>
<section class="u-arrow-bottom" style="bottom: 30px;">
    <div class="pre-wrap-bottom">
        <div class="pre-box1">
            <div class="pre1"></div>
        </div>
        <div class="pre-box2">
            <div class="pre2"></div>
        </div>
    </div>
</section>