Highlight Marker
マーカーで塗られるようにハイライトされるテキスト。
HTML
<p class="marker-text">This is <span class="marker">important</span> information.</p>
CSS
.marker-text {
font-size: 16px;
font-weight: 500;
color: #1a1a1a;
line-height: 1.8;
}
.marker {
background: linear-gradient(transparent 55%, #fde68a 55%);
background-size: 0 100%;
background-repeat: no-repeat;
animation: marker-draw 1s .5s forwards cubic-bezier(.4,0,.2,1);
}
@keyframes marker-draw {
to { background-size: 100% 100%; }
}