아무래도 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 제작의 조금 테크 모임