jquery实现阅读滑动上方进度条显示效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现阅读滑动上方进度条显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic);
        /* Try setting this to true :) */
        html {
            font-size: 70%;
        }

        body {
            height: 100%;
            max-height: 100%;
            font-family: Merriweather,Georgia, serif;
            font-size: 1.8rem;
            line-height: 1.8em;
            color: #3A4145;
            background: #fff;
            width: 100%;
            opacity: 0;
            -webkit-animation: in 0.8s ease 1s forwards;
            -moz-animation: in 0.8s ease 1s forwards;
            animation: in 0.8s ease 1s forwards;
        }

        span {
            content: '';
            height: 5px;
            position: fixed;
            left: 0;
            width: 0%;
            background: #F84BA2;
        }

        ::selection {
            color: #fff;
            background: #F84BA2;
            text-shadow: none;
        }

        p {
            margin: 1.6em 0;
        }

        hr {
            margin: 2em 0;
            text-align: center;
            line-height: 1px;
            height: 1px;
            background: #ddd;
            border: 15px solid #fff;
            border-left: 0;
            border-right: 0;
            font-size: 1.5em;
        }
        hr:after {
            content: attr(txt);
            color: #ddd;
            display: inline;
            background: #fff;
            padding: .2em .5em;
            border: 1px solid #fff;
            border-radius: 100px;
            transition: .3s ease all;
        }
        hr:before {
            position: absolute;
            content: '';
            background: transparent;
            border-spacing: 10px;
            margin-top: -24px;
            -webkit-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -o-transform: scale(0.5);
            transform: scale(0.5);
            margin-left: 1px;
            width: 49px;
            height: 49px;
            transition: .3s ease-out all;
            border-radius: 100px;
        }
        hr:not(.heart):hover:after {
            border: 1px solid #ddd;
        }
        hr:not(.heart):hover:before {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            background: #ddd;
            transition: 3s cubic-bezier(0.5, -0.74, 0.79, 1.53) all;
            -webkit-animation: out 0.3s cubic-bezier(0.5, -0.74, 0.79, 1.53) 3.2s forwards;
            -moz-animation: out 0.3s cubic-bezier(0.5, -0.74, 0.79, 1.53) 3.2s forwards;
            animation: out 0.3s cubic-bezier(0.5, -0.74, 0.79, 1.53) 3.2s forwards;
        }
        hr.heart:after {
            color: #F84BA2;
            padding: .2em .4em;
        }

        article {
            margin: 0 auto;
            max-width: 700px;
            padding: 40px 11.14%;
            word-break: break-word;
            hyphens: auto;
        }
        article p:first-of-type:first-letter {
            float: left;
            font-size: 5.7rem;
            line-height: 6.5rem;
            margin: 0 10px 0 0;
        }
        article p:not(:first-of-type) {
            text-indent: 1.4em;
        }

        h4 {
            color: #ddd;
            font-size: .8em;
            letter-spacing: .51px;
            text-align: center;
            margin: -1.7em auto 3em;
            font-style: italic;
        }

        h2 {
            font-size: 7.4rem;
            font-weight: 600;
            text-align: center;
            font-size: 4.2rem;
            line-height: 10rem;
        }

@media only screen and (max-width: 700px) {
            article {
                font-size: .85em;
                line-height: 1.7em;
                margin-bottom: 30px;
                padding: 8%;
            }
            article p:first-of-type:first-letter {
                font-size: 4.6rem;
                line-height: 5.2rem;
                margin: 0 10px 0 0;
            }

            h2 {
                font-size: 3.5rem;
                line-height: 3.5em;
                letter-spacing: 0;
            }

            h4 {
                letter-spacing: .3px;
                margin: -2.7em auto 4em;
            }
        }
@media only screen and (max-width: 502px) {
            article {
                width: auto;
                font-size: .8em;
                line-height: 1.6em;
            }
            article p:first-of-type:first-letter {
                font-size: 4rem;
                line-height: 4.5rem;
                margin: 0 6px 0 0;
            }

            h2 {
                font-size: 2.4rem;
                line-height: 1.4em;
                letter-spacing: 0;
            }

            h4 {
                letter-spacing: 0;
                margin: .4em auto 3em;
            }
        }
@-webkit-keyframes in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
@-moz-keyframes in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
@keyframes in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
@-webkit-keyframes out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
@-moz-keyframes out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
@keyframes out {
            0% {
 .........完整代码请登录后点击上方下载按钮下载查看