【吹き出し】注目吹き出し_丸文字

下記Beyondコード

JS head

<!-- HTMLここから -->
<div class="balloon__area-attention">
    <!-- 上下するアニメーションが不要な場合は「is-slide-attention」クラスを外してください -->
    <div class="under__balloon-attention is-slide-attention">
        <!-- 吹き出し内のテキスト -->
        <p>注目！</p>
    </div>
</div>

CSS

/* widget全体の設定 */
.balloon__area-attention {
  /* 横幅 */
  width: 100%;
  /* 高さ */
  height: auto;
  /* 位置( left | center | right ) */
  text-align: left;
  position: relative;
  margin-bottom: 15px;
}



/* 吹き出しの設定 */
.under__balloon-attention {
  display: inline-block;
  /* 外側の余白 */
  margin: 0;
  /* 内側の余白 */
  padding: 6px 8px;
  /* 最小幅 */
  min-width: 50px;
  /* 最大幅 */
  max-width: 100%;
  /* 吹き出しの色 */
  background: #f26671;
  /* 吹き出しの角丸 */
  border-radius: 10px;
}



/* 吹き出しの三角 */
.under__balloon-attention:before {
  content: "";
  position: absolute;
  /* 表示位置（上基準） */
  top: calc(100% - 1px);
  /* 表示位置（左基準） */
  left: 35%;
  /* 外側の左余白 */
  margin-left: -8px;
  /* 三角形の横幅 */
  border: 8px solid transparent;
  /* 三角形の高さ、三角形の色 */
  border-top: 6px solid #f26671;
}



/* 吹き出し内テキスト */
.under__balloon-attention p {
  /* 外側の余白 */
  margin: 0;
  /* 内側の余白 */
  padding: 0;
  /* 文字の大きさ */
  font-size: 14px;
  /* 文字の色 */
  color: #fff;
  /* 文字の位置 */
  text-align: center;
  /* 文字の太さ */
  font-weight: bold;
  /* フォント（webフォント） */
  font-family: "M PLUS Rounded 1c";
}



/* アニメーション */
.is-slide-attention {
  /*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜実行回数 */
  animation: slide-attention 1s infinite;
}

/* アニメーションの詳細 */
@keyframes slide-attention {

  /* スタート時 */
  0% {
    /* X方向、Y方向 */
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 10px);
  }

  /* 終了時 */
  100% {
    transform: translate(0, 0);
  }
}