如何使用 Html/Css 添加动画向下滚动按钮？

Question

我正在尝试制作一个流畅的滚动程序，它可以工作，但我想要一个有点动画的按钮。

这是我的代码：

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 800px;
  background-color: red;
}

#section2 {
  height: 800px;
  background-color: blue;
}

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h1>Section 1</h1>
  <a href="#section2">Section 2 </a>
</div>

<div class="main" id="section2">
  <h1>Section 2</h1>
  <a href="#section1">Section 1</a>
</div>

我想要这样的东西 -

有没有办法仅使用 HTML 和 CSS 来做到这一点？

Answer 1

所以首先，我转了这个：

<a href="#section2">Section 2 </a>

然后变成这样：

<div class="scrollButton">
   <p class="scrollIcon">></p>
   <a href="#section2">Section 2 </a>
</div>

然后我创建了图标（它是 > 和 transform: rotate(90deg); 的旋转）并将文本放在它下面。然后我使用 CSS 关键帧

为按钮设置动画

您也可以使用普通图标，但不要忘记删除 transform: rotate(90deg);。

代码如下：

<!DOCTYPE html>

<html>
    <head>
        <style>
            /* Styles needed */

            html {
                scroll-behavior: smooth;
            }
            
            a {
              color: #fff;
              text-decoration: none;
            }

            #section1 {
            height: 800px;
            background-color: red;
            }

            #section2 {
            height: 800px;
            background-color: blue;
            }
            
            .scrollButton {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;            
            }
            
            .scrollIcon {
              transform: rotate(90deg);
              display: inline-block;
              position: relative;
              animation: 2.5s scrollIcon infinite;
              color: #fff;
            }
            
            @keyframes scrollIcon {
              0% {
                opacity: 0;
                top: 0; 
              } 
              50% {
                opacity: 1;
              }
              100% {
                opacity: 0;
                top: 15px;
              }
            }
            
        </style>        
    </head>

    <body>
        <h1>Smooth Scroll</h1>

        <div class="main" id="section1">
          <h1>Section 1</h1>
          
          <div class="scrollButton">
            <p class="scrollIcon">></p>
            <a href="#section2">Section 2 </a>
          </div>
          
        </div>
        
        <div class="main" id="section2">
          <h1>Section 2</h1> 
          <div class="scrollButton">
            <p class="scrollIcon">></p>
            <a href="#section1">Section 2 </a>
          </div>
        </div>
    </body>
</html>

Answer 2

是的，CSS 使用动画和伪元素可以做到这一点。

button {
  cursor: pointer;
  background: blue;
  color: white;
  border: none;
  font-size: 18pt;
  padding: 16pt 16pt 8pt;
  position: relative;
}

button::after {
  content: '';
  width: 8pt;
  height: 8pt;
  position: absolute;
  top: 0;
  left: calc(50% - 4pt);
  z-index: 1;
  border-width: 0 0 1pt 1pt;
  border-style: solid;
  border-color: white;
  transform: rotate(-45deg);
  animation: arrowAnimation 1s infinite;
}

@keyframes arrowAnimation {
  0% { top: 0; }
  100% { top: 8pt; }
}

<button type="button">Scroll</button>

如何使用 Html/Css 添加动画向下滚动按钮？

How to add an animated scroll down button using Html/Css?

html

css

css-animations

代码如下：