パーツ番号 05-04-05 ・ CSSのみ
縦棒グラフアニメ
月別の縦棒が表示時に下から伸び上がります。WordPressの売上推移やアクセス数の月次レポートに活用できます。
プレビュー
ソースコード
HTML
<div class="d05-04-05-chart">
<div class="d05-04-05-col"><div class="d05-04-05-bar" style="--d05-04-05-h:45%"></div><span>4月</span></div>
<div class="d05-04-05-col"><div class="d05-04-05-bar" style="--d05-04-05-h:62%"></div><span>5月</span></div>
<div class="d05-04-05-col"><div class="d05-04-05-bar" style="--d05-04-05-h:78%"></div><span>6月</span></div>
<div class="d05-04-05-col"><div class="d05-04-05-bar" style="--d05-04-05-h:55%"></div><span>7月</span></div>
<div class="d05-04-05-col"><div class="d05-04-05-bar" style="--d05-04-05-h:90%"></div><span>8月</span></div>
<div class="d05-04-05-col"><div class="d05-04-05-bar" style="--d05-04-05-h:100%"></div><span>9月</span></div>
</div>CSS
.d05-04-05 .d05-04-05-chart{display:flex;align-items:flex-end;gap:12px;height:200px;width:100%;justify-content:center;padding:0 8px}
.d05-04-05 .d05-04-05-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;flex:1;max-width:44px}
.d05-04-05 .d05-04-05-bar{width:100%;height:0;border-radius:6px 6px 0 0;
background:linear-gradient(180deg,#22b07d,#3fd39a);transition:height 1s cubic-bezier(.22,1,.36,1)}
.d05-04-05.is-in .d05-04-05-bar{height:var(--d05-04-05-h)}
.d05-04-05 .d05-04-05-col span{margin-top:6px;font-size:11px;color:#5a6273}
.d05-04-05.is-in .d05-04-05-col:nth-child(2) .d05-04-05-bar{transition-delay:.08s}
.d05-04-05.is-in .d05-04-05-col:nth-child(3) .d05-04-05-bar{transition-delay:.16s}
.d05-04-05.is-in .d05-04-05-col:nth-child(4) .d05-04-05-bar{transition-delay:.24s}
.d05-04-05.is-in .d05-04-05-col:nth-child(5) .d05-04-05-bar{transition-delay:.32s}
.d05-04-05.is-in .d05-04-05-col:nth-child(6) .d05-04-05-bar{transition-delay:.4s}クラス名 .d05-04-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。