【初心者でもわかる】空中に浮いてる感を出すCSS

#どうも7noteです。空中にふわふわ浮いてるような感じを出すCSS

まるで浮いてるような風に見せるCSSです。
画面内にアニメーションを入れることで、視線を誘導しやすくなります。

ソース

index.html

<div class="floating"><img src="heart.png" alt=""></div>

style.css

.floating {
  display: inline-block; /* 影をつけるためにinline-block要素にする */
  position: relative;    /* 基準位置とする */
}
.floating::before {
  content: '';                   /* 疑似要素に必須 */
  background: rgba(0, 0, 0, .3); /* 半透明の黒を指定 */
  border-radius: 50%;            /* 円形にする */
  display: inline-block;         /* インラインブロック要素にする */
  position: absolute;            /* 相対位置にする */
  bottom: -35%;                  /* 下に35%の位置に設置 */
  left: 50%;                     /* 左から50%の位置に設置 */
  transform: translateX(-50%);   /* 左右中央にするために要素の半分ぶんだけ左に戻す */
  animation: move-y-shadow .5s infinite alternate ease-in-out;  /* アニメーション「move-y-shadow」 */
}
.floating img {
  animation: move-y .5s infinite alternate ease-in-out;  /* アニメーション「move-y」 */
}

/* 上下を繰り返すアニメーション */
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/* 影の大きさをかえるアニメーション */
@keyframes move-y-shadow {
  from {
    width: 57%;
    height: 25%;
  }
  to {
    width: 50%;
    height: 20%;
  }
}

解説

まずはふわふわと上下に動かすためにアニメーションで上下移動を作ります。

その後、横長の円形の陰を作り、これも上下のアニメーションと動きを連動させて大きさを少し変えることで、実際に上下している感じを再現できます。

まとめ

ボタンなど、クリックが必要な場所だと押しにくいので、動いていても問題ない要素を浮かせましょう！
WEBは2D（平面）で表現されるので、3D(立体)っぽく見せる表現は良い違和感が出せるのでポイントポイントで使えるといいかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ