css样式向下滑动

<div class="scroll-down" id="scroll-down">

                <span></span>

                <div class="shubiaowz">向下滑动</div>

            </div>

   

 

 

/* 向下 */

    .scroll-down span {

        position: absolute;

        bottom: 45px;

        left: 50%;

        width: 24px;

        height: 40px;

        margin-left: -15px;

        border: 2px solid #fff;

        border-radius: 50px;

        box-sizing: border-box;

        z-index: 7777;

        cursor: pointer;

    }

    .scroll-down span::before {

        position: absolute;

        top: 6px;

        left: 50%;

        content: '';

        width: 6px;

        height: 6px;

        margin-left: -3px;

        background-color: #fff;

        border-radius: 100%;

        -webkit-animation: sdb10 2s infinite;

        animation: sdb10 2s infinite;

        -moz-animation: sdb10 2s infinite;

        box-sizing: border-box;

    }

    .scrollfan span {

        border: 2px solid #333333;

    }

    .scrollfan span::before {

        background-color: #333333;

    }

    .scrollfan .shubiaowz {

        color: #333333;

    }

    .shubiaowz {

        position: absolute;

        bottom: 16px;

        color: #ccc;

        font-size: 12px;

        width: 100%;

        left: 0;

        text-align: center;

        z-index: 77;

    }

    @-webkit-keyframes sdb10 {

        0% {

            -webkit-transform: translate(0, 0);

            opacity: 0;

        }

        40% {

            opacity: 1;

        }

        80% {

            -webkit-transform: translate(0, 20px);

            opacity: 0;

        }

        100% {

            opacity: 0;

        }

    }

    @keyframes sdb10 {

        0% {

            transform: translate(0, 0);

            opacity: 0;

        }

        40% {

            opacity: 1;

        }

        80% {

            transform: translate(0, 20px);

            opacity: 0;

        }

        100% {

            opacity: 0;

        }

    }