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

浮遊する幾何学図形

円・三角・四角がふわふわ回転しながらゆっくり漂う装飾背景です。WordPressの余白セクションに軽やかな動きを添えたいときに便利です。

autocss3d

プレビュー

ソースコード

HTML

<span class="d07-02-02-shape d07-02-02-circle"></span>
        <span class="d07-02-02-shape d07-02-02-tri"></span>
        <span class="d07-02-02-shape d07-02-02-square"></span>
        <span class="d07-02-02-shape d07-02-02-circle2"></span>
        <span class="d07-02-02-label">背景サンプル</span>

CSS

.d07-02-02{padding:0;background:linear-gradient(135deg,#eef2ff,#f6f0ff)}
        .d07-02-02-label{position:relative;z-index:2;color:#4a4a70;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-02-shape{position:absolute;opacity:.55}
        .d07-02-02-circle{left:12%;top:22%;width:46px;height:46px;border-radius:50%;background:#7b5cff;animation:d162float 7s ease-in-out infinite}
        .d07-02-02-circle2{right:14%;bottom:20%;width:30px;height:30px;border-radius:50%;background:#3ad1ff;animation:d162float 9s ease-in-out infinite reverse}
        .d07-02-02-square{right:18%;top:18%;width:40px;height:40px;border-radius:8px;background:#ff5c9d;animation:d162spin 11s linear infinite}
        .d07-02-02-tri{left:18%;bottom:18%;width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:44px solid #ffb545;animation:d162spin 13s linear infinite reverse}
        @keyframes d162float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(25deg)}}
        @keyframes d162spin{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-14px)}100%{transform:rotate(360deg) translateY(0)}}

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