<section id="sec-1">
<div class="container">
<h1>Hello World</h1>
<a href="#sec-2">
<div class="scroll-down"></div>
</a>
</div>
</section>
<section id="sec-2">
<div class="container">
<h1>这是第二部分</h1>
</div>
</section>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 40px;
font-family: "Montserrat";
scroll-behavior: smooth;
}
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#sec-1 {
background-color: rgb(214, 228, 92);
}
#sec-2 {
background-color: aliceblue;
}
.scroll-down {
height: 50px;
width: 30px;
border: 2px solid black;
position: absolute;
left: 50%;
bottom: 20px;
border-radius: 50px;
cursor: pointer;
}
.scroll-down::before,
.scroll-down::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 10px;
width: 10px;
transform: translate(-50%, -100%) rotate(45deg);
border: 2px solid black;
border-top: transparent;
border-left: transparent;
animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
top: 30%;
animation-delay: 0.3s;
/* animation: scroll-down 1s ease-in-out infinite; */
}
@keyframes scroll-down {
0% {
/* top:20%; */
opacity: 0;
}
30% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
top: 90%;
opacity: 0;
}
}
JS
格式化