乱七八糟的源码:

<html>
<style>
body{
    margin: 0px;
    
}
.b{
	background-image:url("b.jpg");
	background-size: cover;
	background-attachment: fixed;
    height:100%;
    text-align: center;
    animation: fadeInAnimation ease 1.5s;
    animation-iteration-count: 1;
    background-position:center;
}
.scrollDownIcon{
    position:absolute;
    border-right:3px solid;
    border-top:3px solid;
    border-color:rgba(255,255,255,.5);
    border-radius:2px;
    box-sizing:unset;
    height:20px;
    width:20px;
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    cursor:pointer;
    transition:.25s;
    float:center;
    margin-top:50%;
}
@keyframes fadeInAnimation { 
    0% { 
        filter:brightness(0%);
        transform: scale(1.04);
    } 
    17% { 
        transform: scale(1.04);
        filter:brightness(0%);
    } 
    100%{
        filter:brightness(100%);
        transform: scale(1);
    }
} 
.title{
    text-align: center;
    position:absolute;
    top:30%;
    font-weight: 400;
    font-size:76px;
    width:100%;
    color:white;
}
.explan{
    text-align: center;
    position:absolute;
    top:50%;
    font-weight: 400;
    font-size:15px;
    width:100%;
    color:white;
}
.underline1{
    position:absolute;
    top:40%;
    height:4px;
    width:70px;
    background-color: #70C000;
    float: center;
}
.word{
    position:absolute;
    margin-top:100%;
	width:100%;
	height:2170px;
	text-align:center;
}
</style>
<body>
    <div style="overflow:hidden;width:calc(100%+20px)">
        <div class="b"></div>
        <div align="center" style="position:absolute;top:30%;width:100%;text-align:center">
            <h1 class="title">钩深致远.</h1><br />
            <span class="underline1"></span>
            <h2 class="explan">《周易·系辞上》：“探赜索隐，钩深致远。”</h2><span class="scrollDownIcon"></span>
        </div>
        <div class="word">
            <h1>TEST</h1>
            <span class="underline1"></span>
        </div>
    </div>
</body>
</html>
求助
