css实现10种向下滚动图标动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现10种向下滚动图标动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        section {
            position: relative;
            width: 100%;
            height: 100%;
        }
        section::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 80%;
            background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
            background: linear-gradient(tobottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
        }
        section h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            color: #fff;
            font: normal 300 64px/1 'Josefin Sans', sans-serif;
            text-align: center;
            white-space: nowrap;
        }

        #section01 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section02 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section03 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section04 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section05 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section06 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section07 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section08 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section09 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }
        #section10 {
            background: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) center center / cover no-repeat;
        }

        #thanks {
            background-color: #fff;
        }
        #thanks::after {
            content: none;
        }
        #thanks div {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
        #thanks h2 {
            margin-bottom: 60px;
            color: #333;
            font: normal 300 64px/1 'Josefin Sans', sans-serif;
            text-align: center;
            white-space: nowrap;
        }
        #thanks p {
            color: #333;
            font: normal 400 20px/1 'Josefin Sans', sans-serif;
        }
        #thanks p a {
            color: #333;
            text-decoration: none;
            transition: color .3s;
        }
        #thanks p a:hover {
            color: #888;
        }
        .demo a {
            position: absolute;
            bottom: 20px;
            left: 50%;
            z-index: 2;
            display: inline-block;
            -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
            color: #fff;
            font: normal 400 20px/1 'Josefin Sans', sans-serif;
            letter-spacing: .1em;
            text-decoration: none;
            transition: opacity .3s;
        }
        .demo a:hover {
            opacity: .5;
        }



        #section01 a {
            padding-top: 60px;
        }
        #section01 a span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 24px;
            height: 24px;
            margin-left: -12px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            box-sizing: border-box;
        }



        #section02 a {
            padding-top: 60px;
        }
        #section02 a span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 46px;
            height: 46px;
            margin-left: -23px;
            border: 1px solid #fff;
            border-radius: 100%;
            box-sizing: border-box;
        }
        #section02 a span::after {
            position: absolute;
            top: 50%;
            left: 50%;
            content: '';
            width: 16px;
            height: 16px;
            margin: -12px 0 0 -8px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            box-sizing: border-box;
        }



        #section03 a {
            padding-top: 60px;
        }
        #section03 a span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 46px;
            height: 46px;
            margin-left: -23px;
            border: 1px solid #fff;
            border-radius: 100%;
            box-sizing: border-box;
        }
        #section03 a span::after {
            position: absolute;
            top: 50%;
            left: 50%;
            content: '';
            width: 16px;
            height: 16px;
            margin: -12px 0 0 -8px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            box-sizing: border-box;
        }
        #section03 a span::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            content: '';
            width: 44px;
            height: 44px;
            box-shadow: 0 0 0 0 rgba(255,255,255,.1);
            border-radius: 100%;
            opacity: 0;
            -webkit-animation: sdb03 3s infinite;
            animation: sdb03 3s infinite;
            box-sizing: border-box;
        }
@-webkit-keyframes sdb03 {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            60% {
                box-shadow: 0 0 0 60px rgba(255,255,255,.1);
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }
@keyframes sdb03 {
            0% {
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            60% {
                box-shadow: 0 0 0 60px rgba(255,255,255,.1);
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }



        #section04 a {
            padding-top: 60px;
        }
        #section04 a span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 24px;
            height: 24px;
            margin-left: -12px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: sdb04 2s infinite;
            animation: sdb04 2s infinite;
            box-sizing: border-box;
        }
@-webkit-keyframes sdb04 {
            0% {
                -webkit-transform: rotate(-45deg) translate(0, 0);
            }
            20% {
                -webkit-transform: rotate(-45deg) translate(-10px, 10px);
            }
            40% {
                -webkit-transform: rotate(-45deg) translate(0, 0);
            }
        }
@keyframes sdb04 {
            0% {
                transform: rotate(-45deg) translate(0, 0);
            }
            20% {
                transform: rotate(-45deg) translate(-10px, 10px);
            }
            40% {
                transform: rotate(-45deg) translate(0, 0);
            }
        }



        #section05 a {
            padding-top: 70px;
        }
        #section05 a span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 24px;
            height: 24px;
            margin-left: -12px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: sdb05 1.5s infinite;
            animation: sdb05 1.5s infinite;
            box-sizing: border-box;
        }
@-webkit-keyframes sdb05 {
            0% {
                -webkit-transform: rotate(-45deg) translate(0, 0);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                -webkit-transform: rotate(-45deg) translate(-20px, 20px);
                opacity: 0;
            }
        }
@keyframes sdb05 {
            0% {
          .........完整代码请登录后点击上方下载按钮下载查看