パーツ番号 07-02-05 ・ CSSのみ

アニメーションブロブ(有機的な形)

border-radiusが変形し続ける、ぼかしの効いた有機的なブロブ背景です。WordPressの柔らかい世界観のLPやサービス紹介に映えます。

css

プレビュー

ソースコード

HTML

<span class="d07-02-05-blob"></span>
        <span class="d07-02-05-blob d07-02-05-blob2"></span>
        <span class="d07-02-05-label">背景サンプル</span>

CSS

.d07-02-05{padding:0;background:#fff5fb}
        .d07-02-05-label{position:relative;z-index:2;color:#a03a72;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-05-blob{position:absolute;width:150px;height:150px;left:22%;top:26%;
          background:linear-gradient(135deg,#ff7ac1,#ff5c9d);filter:blur(6px);opacity:.8;
          border-radius:60% 40% 55% 45%/50% 55% 45% 50%;animation:d165morph 8s ease-in-out infinite}
        .d07-02-05-blob2{left:auto;top:auto;right:20%;bottom:22%;width:120px;height:120px;
          background:linear-gradient(135deg,#8b7bff,#5cc6ff);animation-duration:10s;animation-direction:reverse}
        @keyframes d165morph{
          0%,100%{border-radius:60% 40% 55% 45%/50% 55% 45% 50%;transform:rotate(0) scale(1)}
          33%{border-radius:40% 60% 45% 55%/55% 45% 60% 40%;transform:rotate(60deg) scale(1.08)}
          66%{border-radius:55% 45% 60% 40%/45% 60% 40% 55%;transform:rotate(-40deg) scale(.94)}}

クラス名 .d07-02-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。