[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>