UserCSS:マーカー記法

code:stylexx.css

/* 二重括弧による強調をマーカーっぽくする */

}

マーカー記法のテスト

----------------------マーカー記法のテスト--------------

.

code:style.css

:root{

--marker-color: var(--accent-color, yellow); /* 強調色 */

/* --marker-color: rgba(250,250,0,0.6); /* 黄色 */

}

hover で動作を変える

code:style.css

/* font-weight: bold; /* */

background: linear-gradient(

transparent 65%,

var(--marker-color) 0% );

}

code:stylexx.css

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%; }

}

タイミングを調整

code:style.css

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%; }

}

code:stylexx.css

/* 二重括弧による強調をマーカーっぽくする */

--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%; }

}

UserCSS.icon

https://img.shields.io/badge/UserCSS-マーカー記法-1572B6.svg?logo=css3&style=for-the-badge