パーツ番号 05-01-06 ・ CSSのみ
グラデーションボーダーカード
conic-gradientの枠が回転し続けるカード。WordPressで注目させたい会員募集やキャンペーン枠にアクセントを与えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。