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

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

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