本文へスキップ

CRG-09 — BUBBLES

吹き出し25点 在庫あり

会話・注釈・ツールチップ。しっぽ付きの箱。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-09-001
こんにちは！定番の吹き出しです。

ベーシック吹き出しBasic Bubble

.cg-sb-basic {
  position: relative;
  display: inline-block;
  padding: 14px 20px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
}
.cg-sb-basic::before,
.cg-sb-basic::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 26px;
  border: 6px solid transparent;
}
.cg-sb-basic::before {
  bottom: -15px;
  border-top-color: #1B1A17;
  border-bottom: 0;
  border-width: 8px;
  left: 24px;
}
.cg-sb-basic::after {
  border-top-color: #fff;
  border-bottom: 0;
  border-width: 6px;
}
<div class="cg-sb-basic">こんにちは！定番の吹き出しです。</div>
GROSS WT. 619 B ORIGINAL
CRG-09-002

お問い合わせありがとうございます！

チャット風(相手)Chat Left

.cg-sb-chat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cg-sb-chat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C89B6C, #8A6A44);
  flex: none;
}
.cg-sb-chat p {
  position: relative;
  margin: 4px 0 0;
  padding: 12px 18px;
  font-size: 14px;
  background: #EFECE4;
  border-radius: 4px 16px 16px 16px;
  max-width: 220px;
}
<div class="cg-sb-chat"><span class="cg-sb-chat-icon" aria-hidden="true"></span><p>お問い合わせありがとうございます！</p></div>
GROSS WT. 541 B ORIGINAL
CRG-09-003

了解です、よろしくお願いします！

チャット風(自分)Chat Right

.cg-sb-mine {
  margin: 0;
  margin-left: auto;
  display: inline-block;
  padding: 12px 18px;
  font-size: 14px;
  color: #fff;
  background: #E8590C;
  border-radius: 16px 4px 16px 16px;
  max-width: 240px;
}
<p class="cg-sb-mine">了解です、よろしくお願いします！</p>
GROSS WT. 284 B ORIGINAL
CRG-09-004

ホバーツールチップHover Tooltip

.cg-sb-tip {
  position: relative;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 2px dotted #E8590C;
  cursor: help;
  padding: 2px;
}
.cg-sb-tip span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 220px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #1B1A17;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.cg-sb-tip span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1B1A17;
}
.cg-sb-tip:hover span,
.cg-sb-tip:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
<button class="cg-sb-tip" type="button">用語<span role="tooltip">マウスを乗せると出る補足説明</span></button>
GROSS WT. 1022 B ORIGINAL
CRG-09-005
どうしようかな…

もくもく思考バブルThought Bubble

.cg-sb-think {
  position: relative;
  display: inline-block;
  padding: 16px 24px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 30px;
}
.cg-sb-think::before,
.cg-sb-think::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1B1A17;
}
.cg-sb-think::before {
  width: 14px;
  height: 14px;
  bottom: -16px;
  left: 30px;
}
.cg-sb-think::after {
  width: 7px;
  height: 7px;
  bottom: -28px;
  left: 22px;
}
<div class="cg-sb-think">どうしようかな…</div>
GROSS WT. 556 B ORIGINAL
CRG-09-006
SALE!!

トゲトゲ叫びバブルShout Burst

.cg-sb-shout {
  display: inline-block;
  padding: 24px 30px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  clip-path: polygon(
    50% 0%, 61% 12%, 76% 4%, 79% 20%, 96% 18%, 90% 33%,
    100% 42%, 89% 52%, 98% 66%, 82% 68%, 84% 85%, 68% 79%,
    62% 95%, 50% 84%, 38% 95%, 32% 79%, 16% 85%, 18% 68%,
    2% 66%, 11% 52%, 0% 42%, 10% 33%, 4% 18%, 21% 20%,
    24% 4%, 39% 12%
  );
}
<div class="cg-sb-shout">SALE!!</div>
GROSS WT. 452 B ORIGINAL
CRG-09-007
継続は力なり。小さく作って、早く出す。— 開発チームの合言葉

引用ブロック吹き出しQuote Block

.cg-sb-quote {
  position: relative;
  margin: 0;
  padding: 22px 26px 18px 46px;
  font-size: 14.5px;
  background: #FBF4EA;
  border-left: 5px solid #C89B6C;
  border-radius: 0 12px 12px 0;
  max-width: 300px;
}
.cg-sb-quote::before {
  content: "\201C";
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 44px;
  font-weight: 900;
  color: #C89B6C;
  font-family: Georgia, serif;
}
.cg-sb-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  color: #5A5650;
}
<blockquote class="cg-sb-quote">継続は力なり。小さく作って、早く出す。<cite>— 開発チームの合言葉</cite></blockquote>
GROSS WT. 659 B ORIGINAL
CRG-09-008
POINT吹き出しにラベルを重ねた注釈ボックス。

リボン付き注釈Ribbon Note

.cg-sb-ribbon {
  position: relative;
  display: inline-block;
  padding: 24px 22px 16px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #E8590C;
  border-radius: 10px;
  max-width: 280px;
}
.cg-sb-ribbon span {
  position: absolute;
  top: -13px;
  left: 14px;
  padding: 3px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff;
  background: #E8590C;
  border-radius: 4px;
}
<div class="cg-sb-ribbon"><span>POINT</span>吹き出しにラベルを重ねた注釈ボックス。</div>
GROSS WT. 527 B ORIGINAL
CRG-09-009
まずはここをチェック

矢印下向きバナーArrow Banner

.cg-sb-down {
  display: inline-block;
  padding: 14px 30px 26px;
  font-size: 14px;
  font-weight: 900;
  color: #1B1A17;
  background: #F2B707;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
}
<div class="cg-sb-down">まずはここをチェック</div>
GROSS WT. 297 B ORIGINAL
CRG-09-010

このサイトは無料ですか？

はい、全パーツ無料です！

インタビュー対話セットInterview Pair

.cg-sb-qa { display: grid; gap: 10px; max-width: 300px; }
.cg-sb-qa p {
  margin: 0;
  padding: 11px 16px;
  font-size: 13.5px;
  border-radius: 12px;
  position: relative;
}
.cg-sb-qa .q {
  background: #EFECE4;
  border-bottom-left-radius: 2px;
  justify-self: start;
}
.cg-sb-qa .a {
  color: #fff;
  background: #3A5A78;
  border-bottom-right-radius: 2px;
  justify-self: end;
}
<div class="cg-sb-qa"><p class="q">このサイトは無料ですか？</p><p class="a">はい、全パーツ無料です！</p></div>
GROSS WT. 516 B ORIGINAL
CRG-09-011
アイコンの横に置く吹き出し。

横しっぽ吹き出しSide Tail

.cg-sb-sidetail {
  position: relative;
  display: inline-block;
  margin-left: 14px;
  padding: 13px 20px;
  font-size: 14px;
  background: #EFECE4;
  border-radius: 12px;
}
.cg-sb-sidetail::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 16px;
  border: 6px solid transparent;
  border-right: 10px solid #EFECE4;
  border-left: 0;
}
<div class="cg-sb-sidetail">アイコンの横に置く吹き出し。</div>
GROSS WT. 430 B ORIGINAL
CRG-09-012
見て見て！

ぷるぷる震える吹き出しWobble Bubble

.cg-sb-wobble {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  border-radius: 30px;
  animation: cg-sb-wobble-shake 2.2s ease-in-out infinite;
  transform-origin: bottom left;
}
.cg-sb-wobble::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  border: 7px solid transparent;
  border-top: 12px solid #E8590C;
  border-bottom: 0;
  transform: rotate(18deg);
}
@keyframes cg-sb-wobble-shake {
  0%, 74%, 100% { transform: rotate(0); }
  80% { transform: rotate(-3deg); }
  86% { transform: rotate(3deg); }
  92% { transform: rotate(-2deg); }
}
<div class="cg-sb-wobble">見て見て！</div>
GROSS WT. 716 B ORIGINAL
CRG-09-013
いらっしゃいませ！

ぽんっと出る吹き出しPop In Loop

.cg-sb-pop {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 14px;
  transform-origin: bottom left;
  animation: cg-sb-pop-in 3s cubic-bezier(.3, 1.5, .5, 1) infinite;
}
.cg-sb-pop::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 18px;
  border: 6px solid transparent;
  border-top: 10px solid #1B1A17;
  border-bottom: 0;
}
@keyframes cg-sb-pop-in {
  0% { transform: scale(0); opacity: 0; }
  12%, 82% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0); opacity: 0; }
}
<div class="cg-sb-pop">いらっしゃいませ！</div>
GROSS WT. 696 B ORIGINAL
CRG-09-014
気になることはありますか？

ふわふわ浮く吹き出しGentle Float

.cg-sb-floaty {
  position: relative;
  display: inline-block;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #3A5A78;
  border-radius: 16px;
  animation: cg-sb-floaty-move 3.2s ease-in-out infinite;
}
.cg-sb-floaty::before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 26px;
  border: 7px solid transparent;
  border-top: 11px solid #3A5A78;
  border-bottom: 0;
}
@keyframes cg-sb-floaty-move {
  50% { transform: translateY(-7px); }
}
<div class="cg-sb-floaty">気になることはありますか？</div>
GROSS WT. 568 B ORIGINAL
CRG-09-015
ここをタップ

ぴょんぴょん誘導バブルBouncing Guide

.cg-sb-guide {
  position: relative;
  display: inline-block;
  padding: 11px 22px 15px;
  font-size: 13px;
  font-weight: 900;
  color: #1B1A17;
  background: #F2B707;
  border-radius: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 58% calc(100% - 8px), 50% 100%, 42% calc(100% - 8px), 0 calc(100% - 8px));
  animation: cg-sb-guide-hop 1.2s ease-in-out infinite;
}
@keyframes cg-sb-guide-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
<div class="cg-sb-guide">ここをタップ</div>
GROSS WT. 541 B ORIGINAL
CRG-09-016
新着メッセージ 2件

ぶるぶる通知バブルBuzzing Alert

.cg-sb-buzz {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border-radius: 30px;
  animation: cg-sb-buzz-shake 2.8s ease-in-out infinite;
}
.cg-sb-buzz svg { color: #F2B707; }
@keyframes cg-sb-buzz-shake {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-2.5px) rotate(-1.5deg); }
  93% { transform: translateX(2.5px) rotate(1.5deg); }
  96% { transform: translateX(-1.5px); }
}
<div class="cg-sb-buzz"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>新着メッセージ 2件</div>
GROSS WT. 846 B ORIGINAL
CRG-09-017
しっぽの根本から出現！

しっぽから膨らむ吹き出しGrow from Tail

.cg-sb-grow {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #E8590C;
  border-radius: 4px 16px 16px 16px;
  transform-origin: top left;
  animation: cg-sb-grow-in 3.4s cubic-bezier(.3, 1.4, .5, 1) infinite;
}
@keyframes cg-sb-grow-in {
  0% { transform: scale(0) rotate(-8deg); opacity: 0; }
  14%, 84% { transform: scale(1) rotate(0); opacity: 1; }
  96%, 100% { transform: scale(0) rotate(-8deg); opacity: 0; }
}
<div class="cg-sb-grow">しっぽの根本から出現！</div>
GROSS WT. 568 B ORIGINAL
CRG-09-019

こんにちは！

相談したいことがあって…

なんでもどうぞ！

順に現れるチャットChat Sequence

.cg-sb-seq {
  display: grid;
  gap: 8px;
  width: 250px;
}
.cg-sb-seq p {
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 14px;
  opacity: 0;
  animation: cg-sb-seq-show 6s ease-in-out infinite;
}
.cg-sb-seq .a {
  background: #EFECE4;
  justify-self: start;
  border-bottom-left-radius: 3px;
}
.cg-sb-seq .b {
  color: #fff;
  background: #E8590C;
  justify-self: end;
  border-bottom-right-radius: 3px;
  animation-delay: 1.2s;
}
.cg-sb-seq p:last-child { animation-delay: 2.4s; }
@keyframes cg-sb-seq-show {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 80% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; }
}
<div class="cg-sb-seq"><p class="a">こんにちは！</p><p class="b">相談したいことがあって…</p><p class="a">なんでもどうぞ！</p></div>
GROSS WT. 823 B ORIGINAL
CRG-09-020

グラスツールチップGlass Tooltip

.cg-sb-glassbg {
  padding: 44px 40px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #C2426B, #3A5A78);
}
.cg-sb-glasstip {
  position: relative;
  padding: 11px 26px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 30px;
  cursor: pointer;
}
.cg-sb-glasstip span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.cg-sb-glasstip:hover span,
.cg-sb-glasstip:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
<div class="cg-sb-glassbg"><button class="cg-sb-glasstip" type="button">HOVER<span role="tooltip">すりガラスの補足チップ</span></button></div>
GROSS WT. 1210 B ORIGINAL
CRG-09-021

入力中インジケーターTyping Indicator

.cg-sb-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 20px;
  background: #EFECE4;
  border-radius: 4px 16px 16px 16px;
}
.cg-sb-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8A8478;
  animation: cg-sb-typing-bounce 1.2s ease-in-out infinite;
}
.cg-sb-typing span:nth-child(2) { animation-delay: .15s; }
.cg-sb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cg-sb-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-6px); opacity: 1; }
}
<div class="cg-sb-typing" role="status" aria-label="相手が入力中"><span></span><span></span><span></span></div>
GROSS WT. 694 B ORIGINAL
CRG-09-022
やわらかい形の吹き出しです

揺らぐブロブ吹き出しLiquid Blob Bubble

.cg-sb-blob {
  position: relative;
  display: inline-block;
  padding: 20px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #1B1A17;
  background: #F2B707;
  animation: cg-sb-blob-morph 6s ease-in-out infinite;
}
.cg-sb-blob::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  bottom: -8px;
  left: 30px;
  background: #F2B707;
  border-radius: 50%;
  animation: cg-sb-blob-dot 6s ease-in-out infinite;
}
@keyframes cg-sb-blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  33% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }
  66% { border-radius: 35% 65% 55% 45% / 40% 35% 65% 60%; }
}
@keyframes cg-sb-blob-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.65); }
}
<div class="cg-sb-blob">やわらかい形の吹き出しです</div>
GROSS WT. 823 B ORIGINAL
CRG-09-023
新着3件あります

スプリングポップ吹き出しSpring Pop Bubble

.cg-sb-spring {
  position: relative;
  display: inline-block;
}
.cg-sb-spring-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: #3A5A78;
  cursor: pointer;
}
.cg-sb-spring-pop {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #E8590C;
  border-radius: 4px 16px 16px 16px;
  white-space: nowrap;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom left;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.cg-sb-spring:hover .cg-sb-spring-pop,
.cg-sb-spring-btn:focus-visible ~ .cg-sb-spring-pop {
  transform: translateX(-50%) scale(1);
}
<div class="cg-sb-spring"><button type="button" class="cg-sb-spring-btn" aria-label="通知を見る"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></button><span class="cg-sb-spring-pop" role="tooltip">新着3件あります</span></div>
GROSS WT. 1250 B ORIGINAL
CRG-09-024

開封ありがとうございます。
ご注文の出荷は明日の午前です。

封を切って開く手紙バブルUnfolding Letter Bubble

/* hover / フォーカスで「封蝋が弾ける → フラップが開く → 本文がばねで立ち上がる →
   しっぽが遅れて伸びる」の4段が少しずつずれて起きる。層は封蝋・フラップ・本体・しっぽの4つ。
   動きを止めた場合は最初から「開いて読める状態」を初期値にするので意味が通る */
.cg-sb-fold {
  position: relative;
  width: 250px;
  padding-top: 30px;
  outline: none;
  perspective: 700px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.cg-sb-fold:focus-visible {
  outline: 2px solid #3A5A78;
  outline-offset: 6px;
  border-radius: 4px;
}
/* 封筒のフラップ(上辺の三角) */
.cg-sb-fold-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 38px;
  background: linear-gradient(#F5F1E6, #E1D9C6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 2;
}
/* 封蝋: 弾けて縮みながら消える */
.cg-sb-fold-seal {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F08C4B, #B8431C 72%);
  box-shadow: 0 1px 3px rgba(27, 26, 23, .45);
  transform: scale(1) rotate(0deg);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .28s ease;
  z-index: 3;
}
.cg-sb-fold-body {
  position: relative;
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid #E3DFD4;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.75;
  color: #1B1A17;
  transform-origin: 50% 0;
  transform: scaleY(.14) translateY(-8px);
  opacity: 0;
  box-shadow: 0 2px 6px -6px rgba(27, 26, 23, .5);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .12s, opacity .3s ease .12s, box-shadow .5s ease .12s;
}
.cg-sb-fold-body p { margin: 0; }
/* しっぽ: 本文が立ってから伸びる */
.cg-sb-fold-body::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #fff transparent transparent transparent;
  transform-origin: 0 0;
  transform: scale(0);
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1) .32s;
}
.cg-sb-fold:hover .cg-sb-fold-flap,
.cg-sb-fold:focus-visible .cg-sb-fold-flap { transform: rotateX(-155deg); }
.cg-sb-fold:hover .cg-sb-fold-seal,
.cg-sb-fold:focus-visible .cg-sb-fold-seal { transform: scale(.18) rotate(-42deg); opacity: 0; }
.cg-sb-fold:hover .cg-sb-fold-body,
.cg-sb-fold:focus-visible .cg-sb-fold-body {
  transform: scaleY(1) translateY(0);
  opacity: 1;
  box-shadow: 0 14px 22px -16px rgba(27, 26, 23, .6);
}
.cg-sb-fold:hover .cg-sb-fold-body::after,
.cg-sb-fold:focus-visible .cg-sb-fold-body::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .cg-sb-fold-flap,
  .cg-sb-fold-seal,
  .cg-sb-fold-body,
  .cg-sb-fold-body::after { transition: none; }
  /* 開封済みの静止形。本文が読めて吹き出しとして成立する */
  .cg-sb-fold-flap { transform: rotateX(-155deg); }
  .cg-sb-fold-seal { opacity: 0; }
  .cg-sb-fold-body { transform: none; opacity: 1; }
  .cg-sb-fold-body::after { transform: scale(1); }
}
<div class="cg-sb-fold" tabindex="0" role="note" aria-label="開封して読むメッセージ"><span class="cg-sb-fold-flap" aria-hidden="true"></span><span class="cg-sb-fold-seal" aria-hidden="true"></span><div class="cg-sb-fold-body"><p>開封ありがとうございます。<br>ご注文の出荷は明日の午前です。</p></div></div>
GROSS WT. 3661 B ORIGINAL
CRG-09-025
インクが落ちて、滲んで、言葉になる。

インクが滲んで現れる吹き出しInk Blot Bubble

/* 物語: 一滴が落ちる → 着地で潰れて滲みが散る → 滲みが吹き出しの形に膨らむ(ばね) →
   しっぽが伸びて文字が浮かぶ → 乾いて消えループ */
.cg-sb-ink {
  position: relative;
  width: 264px;
  padding-top: 44px;
}
/* ①落ちる一滴。落下中は縦に伸び、着地でぺしゃんと潰れる */
.cg-sb-ink-drop {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 18px;
  margin-left: -7px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(#3D3B4A, #14131A);
  animation: cg-sb-ink-drop 5s cubic-bezier(.5, 0, .8, .3) infinite;
}
/* ②本体。滲みが上端から膨らんで吹き出しになる */
.cg-sb-ink-body {
  position: relative;
  padding: 16px 20px;
  border-radius: 18px 20px 17px 21px;
  color: #F4F1EA;
  background: #17161E;
  transform-origin: 50% 0;
  transform: scale(.12);
  opacity: 0;
  animation: cg-sb-ink-blot 5s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* ③しっぽ。本体より一拍遅れて伸び上がる */
.cg-sb-ink-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 18px;
  height: 12px;
  margin-left: -9px;
  background: #17161E;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: cg-sb-ink-tail 5s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* ④副次レイヤー: 着地で外へ散る滲み。以降は薄い染みとして残る */
.cg-sb-ink-body::after {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 26px;
  background: radial-gradient(closest-side, rgba(23, 22, 30, .36), rgba(23, 22, 30, 0) 78%);
  opacity: 0;
  animation: cg-sb-ink-spread 5s ease-out infinite;
}
.cg-sb-ink-text {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  opacity: 0;
  animation: cg-sb-ink-text 5s ease-out infinite;
}
@keyframes cg-sb-ink-drop {
  0%        { transform: translateY(-24px) scale(.72, 1.28); opacity: 0; }
  8%        { transform: translateY(-14px) scale(.78, 1.24); opacity: 1; }
  26%       { transform: translateY(22px) scale(.86, 1.2); opacity: 1; }
  31%       { transform: translateY(34px) scale(1.55, .38); opacity: .85; }
  36%       { transform: translateY(34px) scale(2, .14); opacity: 0; }
  100%      { transform: translateY(34px) scale(2, .14); opacity: 0; }
}
@keyframes cg-sb-ink-blot {
  0%, 30%   { transform: scale(.12); opacity: 0; }
  37%       { transform: scale(.62); opacity: .75; }
  46%       { transform: scale(1.07); opacity: 1; }
  54%       { transform: scale(.97); opacity: 1; }
  61%, 87%  { transform: scale(1); opacity: 1; }
  97%, 100% { transform: scale(.12); opacity: 0; }
}
@keyframes cg-sb-ink-tail {
  0%, 34%   { transform: scaleY(0); }
  44%       { transform: scaleY(1.32); }
  53%       { transform: scaleY(.9); }
  61%, 87%  { transform: scaleY(1); }
  97%, 100% { transform: scaleY(0); }
}
@keyframes cg-sb-ink-spread {
  0%, 31%   { transform: scale(.45); opacity: 0; }
  39%       { transform: scale(1.16); opacity: .9; }
  58%       { transform: scale(1); opacity: .32; }
  87%       { transform: scale(1); opacity: .18; }
  100%      { transform: scale(.45); opacity: 0; }
}
@keyframes cg-sb-ink-text {
  0%, 48%   { transform: translateY(5px); opacity: 0; }
  60%, 87%  { transform: translateY(0); opacity: 1; }
  95%, 100% { transform: translateY(5px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形: 滲み終わった吹き出し。本文が読めて吹き出しとして成立する */
  .cg-sb-ink-drop,
  .cg-sb-ink-body,
  .cg-sb-ink-body::before,
  .cg-sb-ink-body::after,
  .cg-sb-ink-text { animation: none; }
  .cg-sb-ink-drop { display: none; }
  .cg-sb-ink-body { transform: none; opacity: 1; }
  .cg-sb-ink-body::before { transform: scaleY(1); }
  .cg-sb-ink-body::after { transform: scale(1); opacity: .2; }
  .cg-sb-ink-text { transform: none; opacity: 1; }
}
<div class="cg-sb-ink"><span class="cg-sb-ink-drop" aria-hidden="true"></span><div class="cg-sb-ink-body"><span class="cg-sb-ink-text">インクが落ちて、滲んで、言葉になる。</span></div></div>
GROSS WT. 4179 B ORIGINAL