マーカー記法
マーカー記法
style.css/* 二重括弧による強調をマーカーっぽくする */
.line strong:not([class]) {
background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);
}
引用元の色に直しました
色反転の都合上、青色で設定しないといい感じにならなかった
style.css.line strong:not([class]):hover {
background: linear-gradient( to right,
transparent,
rgba(171, 255, 79, .6),
transparent 50%
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 10s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to { background-position-x: 400%; }
}
hover時にアニメーションを追加してみました
すごい地味に宣伝してくれていた
自分も今日気がつきました
シャランラみたいな感じで消えておもしろい