Blur Scroll Reveal
ぼかしが解除されながらフェードインするリビール。
HTML
<div class="blur-reveal"> <div style="font-size:22px;font-weight:700;color:#1a1a1a">Clear Focus</div> <div style="color:#999;font-size:13px;margin-top:4px">Scroll to reveal</div> </div>
CSS
.blur-reveal {
text-align: center;
padding: 24px;
animation: blur-in-scroll 1s .3s both;
}
@keyframes blur-in-scroll {
0% { opacity: 0; filter: blur(12px); transform: scale(.95); }
100% { opacity: 1; filter: blur(0); transform: scale(1); }
}