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

【问题标题】：How to add an animated scroll down button using Html/Css?如何使用 Html/Css 添加动画向下滚动按钮？
【发布时间】：2021-08-27 02:46:32
【问题描述】：

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

这是我的代码：

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 来做到这一点？

【问题讨论】：

标签： html css css-animations

【解决方案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>

【讨论】：

嗨@Fero 不要忘记勾选对您帮助最大的答案 :) 它在投票下方

【解决方案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; }
}

&lt;button type="button"&gt;Scroll&lt;/button&gt;

【讨论】：