パーツ番号 08-01-11 ・ CSSのみ

回転フェードインリビール

斜めに傾いたカードが画面に入ると水平に戻りながら現れる、動きに個性のあるリビール。WordPressのお知らせカードや特集見出しのアクセントに使えます。

scrollcss

プレビュー

ソースコード

HTML

<div class="d08-01-11-card io-reveal">
          <span class="d08-01-11-ic">◆</span>
          <h4>回転しながら現れる</h4>
          <p>わずかに傾いた状態からまっすぐに戻りながらフェードインします。</p>
        </div>

CSS

.d08-01-11{background:#fef6f0;}
        .d08-01-11 .d08-01-11-card{
          max-width:290px;padding:24px;background:#fff;border-radius:14px;
          box-shadow:0 12px 28px rgba(120,60,20,.12);text-align:center;
          opacity:0;transform:rotate(-9deg) translateY(20px) scale(.92);
          transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.3,1);
        }
        .d08-01-11 .d08-01-11-card.is-in{opacity:1;transform:rotate(0) translateY(0) scale(1);}
        .d08-01-11 .d08-01-11-ic{display:inline-block;font-size:22px;color:#f97316;margin-bottom:10px;}
        .d08-01-11 .d08-01-11-card h4{margin:0 0 8px;font-size:15.5px;color:#7c2d12;}
        .d08-01-11 .d08-01-11-card p{margin:0;font-size:12px;line-height:1.8;color:#9a6a4a;}

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