固定消失滚动头部效果-html代码-BFW代码库

固定消失滚动头部效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Fixed Disappearing Scrolling Header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
@font-face {
        font-family: 'Sucrose Bold Two';
        src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sucrose.woff2") format("woff2");
    }
@font-face {
        font-family: 'IM Fell French Canon Pro';
        src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2") format("woff2");
    }
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        header {
            background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mountain-range.jpg) no-repeat;
            padding-top: 61.93333333%;
            background-size: cover;
            font-family: 'Sucrose Bold Two';
        }

        header img {
            position: absolute;
            top: 0;
            right: 0;
            width: 45.8%;
        }

        header h1 {
            position: fixed;
            top: 2rem;
            right: 2rem;
            font-size: 12vw;
            line-height: .8;
            margin-top: 0;
            text-align: center;
        }

        header h1 span {
            display: block;
            font-size: 8.75vw;
        }

        main {
            background: #fff;
            position: relative;
            border: 1px solid #fff;
            font-family: 'IM Fell French Canon Pro';
            font-size: 1.4rem;
            padding: 2rem 25%;
            line-height: 1.6;
        }

@media all and (max-width: 400px) {
            main {
                padding: 2rem;
            }
        }

    </style>
   
</head>
<body translate="no">
    <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
    <header>
        <h1>Land <span>of the</span> Lost</h1>
        <img src="mountain-range-front.png">
    </header>
    <main>
        <p>
            From this point he marched two stages—ten parasangs—to the river Psarus, which is two hundred feet broad, and from the Psarus he marched a single stage—five parasangs—to Issi, the last city in Cilicia. It lies on the seaboard—a prosperous, large and flourishing town. Here they halted three days, and here Cyrus was joined by his fleet. There were thirty-five ships from Peloponnesus, with the Lacedaemonian admiral Pythagoras on board. These had been piloted from Ephesus by Tamos the Egyptian, who himself had another fleet of twenty-five ships belonging to Cyrus. These had formed Tamos's blockading squadron.........完整代码请登录后点击上方下载按钮下载查看