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: -.........完整代码请登录后点击上方下载按钮下载查看