狼読

 
2020/06/16

[css]下へと上下に揺れてる下向き矢印ボタンをどうやって作るのか?

今回は、ホームページ閲覧時に下に移動するための上下に揺れている矢印がありますよね?jqueryなどを使わないとできないのかと言われますとcssのみで実装可能です。では作っていきたいと思いますが、この記事では、位置は下にせず、サンプルとしてのせたところで上下するようにするようにしたいと思います。

下向き矢印HTMLとCSSで作ってみよう

まずは、下向きの矢印を、HTMLとCSSで作成していきましょう。作り方の考え方は、四角いボックスの右と下にborderを設定して回転させる事で実装してみましょう。また、今回のサンプルでは、position:relative,absoluteを設定して位置調整すると高さが出ないので、高さ用のdivタグも用意します。

<style>
 .bottom_arrows_wrap{
    margin-top:100px;
    margin-bottom:100px;
 }
 .bottom_arrows{
   position:relative;
 }
 .bottom_arrows a{
   position:absolute;
   left:50%;
   bottom:25px;
   display:inline-block;
   width:50px;
   height:50px;
   border-right:1px solid #000;
   border-bottom:1px solid #000;
   transform:rotateZ(45deg);
   margin-left:-25px;
 }
</style>
<div class="bottom_arrows_wrap">
<div class="bottom_arrows">
 <a href="#"></a>
</div></div>

下向き矢印の実装例

上記のように下向き矢印を実装して、上下に揺らしていこうと思います。

下向き矢印を上下にCSSで揺らしてみよう

CSSで、上下に揺らすためにはCSSでアニメーションを実装する必要があります。また上下に揺らし続ける必要があるため、無限に揺らし続けるという設定が必要になります。CSSでアニメーションを行うためには、keyframesを使用します。

<style>
 .bottom_arrows_wrap{
    margin-top:100px;
    margin-bottom:100px;
 }
 .bottom_arrows{
   position:relative;
 }
 .bottom_arrows a{
   position:absolute;
   left:50%;
   bottom:25px;
   display:inline-block;
   width:50px;
   height:50px;
   border-right:1px solid #000;
   border-bottom:1px solid #000;
   transform:rotateZ(45deg);
   margin-left:-25px;
   animation:3s shake infinite ease-in;
 }
@keyframes shake{
  0%{
    bottom:10px
  }
  50%{
    bottom:25px;
  }
  100%{
    bottom:10px;
  }
}
</style>
<div class="bottom_arrows_wrap">
<div class="bottom_arrows">
 <a href="#"></a>
</div></div>

下向き矢印を上下に揺らしてみたサンプル実装例

上記のように滑らかに上下させるためには、50%のところでマックスが来るように設定し、0%と100%は元に戻すという記述を行う事で実装することができます。

まとめ

今回は、ホームページのトップを開いたらよく見る下へという矢印が上下に揺れているものをcssで実装させていただきました。考え方は、poition:absoluteとしたものを上と下の値を設定し、cssのkeyframesを使ってずっとその値を行き来させるといった記述を行うことです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/22

【Mac】パッケージのインストールが簡単になる!HomebrewとHomebrew-caskの使い方

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読