Scroll設定　矢印が下向きに流れる設定 HTML・CSS・animationで設定する方法でコード書いてみた。【サンプルコードあり】

よく見るページのトップ画像にある、下にスクロール
する画像の設定を、HTML・CSSで設定してみた。

下向き矢印が下にスクロールする設定です。

background-imageで画像を設定して
スクロール矢印の動きは、animation
で動きをつけてます。

参考になると幸いです

実際に書いたコード
YouTube動画はこちら

実際に書いたコード

HTML

<body>
  <section class="top-mv">
    <div class="top-image">
      <a href="#about" class="scroll">
        <p>scroll</p>
        <div class="scroll-button">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
    </div>
  </section>
  <section id="about">
    <h2>ここがABOUTセクションです。</h2>
    <img src="./imgs/a_2.jpg" alt="">
  </section>
</body>

CSS

@charset "utf-8";


.top-mv{
  padding: 0 0;
}

.top-image{
	width: 100%;
	height: 100vh;
	background-image: url(./imgs/a_4.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.scroll p{
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
    top: 69%;
    left: 90%;
    transform: translateX(-50%);
}

.scroll-button{
  position: absolute;
  top: 80%;
  left: 90%;
}

.scroll-button span {
    display: block;
    width: 25px;
    height: 25px;
    border-bottom: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.scroll-button span:nth-child(2){
    animation-delay: -0.2s;
}
.scroll-button span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate{
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}

こんな感じのコードで作成してみました。

border-bottom: 1.5px solid #fff;
transform: rotate(45deg);
で下向きの矢印が出来てます。