← 動的パーツギャラリーへ戻る

パーツ番号 05-01-06 ・ CSSのみ

グラデーションボーダーカード

conic-gradientの枠が回転し続けるカード。WordPressで注目させたい会員募集やキャンペーン枠にアクセントを与えます。

css3d

プレビュー

ソースコード

HTML

<div class="card05-01-06">
          <div class="in05-01-06">
            <h4>会員限定コンテンツ</h4>
            <p>グラデーションの枠が回転し続けて視線を集めます。</p>
            <span class="btn05-01-06">詳しく見る</span>
          </div>
        </div>

CSS

.prev.d05-01-06{background:#171b28}
        .d05-01-06 .card05-01-06{
          position:relative;width:220px;height:190px;border-radius:16px;
          overflow:hidden;padding:3px;
        }
        .d05-01-06 .card05-01-06::before{
          content:"";position:absolute;left:50%;top:50%;
          width:340px;height:340px;margin:-170px 0 0 -170px;
          background:conic-gradient(#5b8def,#a45bef,#ef5b9c,#efb35b,#5b8def);
          animation:spin05-01-06 3.2s linear infinite;
        }
        @keyframes spin05-01-06{to{transform:rotate(360deg)}}
        .d05-01-06 .in05-01-06{
          position:relative;height:100%;border-radius:13px;
          background:#1e2436;color:#fff;padding:24px 20px;
          display:flex;flex-direction:column;justify-content:center;
        }
        .d05-01-06 .in05-01-06 h4{margin:0 0 10px;font-size:14.5px}
        .d05-01-06 .in05-01-06 p{margin:0 0 16px;font-size:11px;line-height:1.7;opacity:.75}
        .d05-01-06 .btn05-01-06{
          align-self:flex-start;font-size:11px;padding:7px 16px;border-radius:99px;
          background:linear-gradient(90deg,#5b8def,#a45bef);cursor:pointer;
        }

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