UserCSS:マーカー記法
元ネタ scrasobox - /scrasobox/マーカー
stylexx.css/* 二重括弧による強調をマーカーっぽくする */
.line strong:not([class]) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)
}マーカー記法のテスト
----------------------マーカー記法のテスト--------------
.
style.css:root{
--marker-color: var(--accent-color, yellow); /* 強調色 */
/* --marker-color: rgba(250,250,0,0.6); /* 黄色 */
}hover で動作を変える
style.css.line strong:not([class]):not(:hover) {
/* font-weight: bold; /* */
background: linear-gradient(
transparent 65%,
var(--marker-color) 0% );
}stylexx.css.line strong:not([class]):hover {
background: linear-gradient( to right,
transparent,
var(--marker-color),
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%; }
} タイミングを調整
style.css.line strong:not([class]):hover {
background: linear-gradient( to right,
var(--marker-color),
transparent 35%,
transparent 65%,
var(--marker-color)
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 15s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to { background-position-x: 400%; }
} stylexx.css/* 二重括弧による強調をマーカーっぽくする */
.line strong:not([class]):hover {
--color-1 : transparent;
/* --color-2 : yellow; /* */
--color-2 : var(--marker-color); /* */
background: linear-gradient( 30deg,
var(--color-1),
var(--color-2),
var(--color-1),
var(--color-1)
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: emorange 10s linear infinite;
animation-direction: reverse;
}
@keyframes emorange {
to { background-position-x: 400%; }
} 