電光掲示板UserCSS小さめver

code:style.css

:root{

--bulletin-board: "ここにテキストを入れる";

}

code:style.css

.quick-launch {

&::before, &::after{

content: var(--bulletin-board);

}

}

code:style.css

.app{

overflow-x: clip;

position: relative;

}

.quick-launch {

margin-top: 2em;

&::before, &::after {

position: absolute;

left: 0;

top: 40px;

font-size: 40px;

text-indent: 1em;

color: var(--bulletin-board-color);

font-weight: 500;

white-space: nowrap;

font-family: 'jost','Zen Kaku Gothic New';

z-index: -1;

letter-spacing: 0.15em;

text-indent: 0.15em;

@media screen and (min-width: 992px) {

letter-spacing: 0.25em;

text-indent: 0.5em;

}

}

}

code:style.css

@media (min-width: 992px){

.quick-launch::before{animation: marquee 30s linear infinite;}

.quick-launch::after{animation: marquee2 30s linear infinite;}

}

@media (min-width: 768px) and (max-width: 991px){

.quick-launch::before{animation: marquee 25s linear infinite;}

.quick-launch::after{animation: marquee2 25s linear infinite;}

}

@media (max-width: 767px){

.quick-launch::before{animation: marquee 20s linear infinite;}

.quick-launch::after{animation: marquee2 20s linear infinite;}

}

@keyframes marquee{

0%{transform: translateX(0%)}

100%{transform:translateX(-100%)}

}

@keyframes marquee2{

0%{transform: translateX(100%)}

100%{transform:translateX(0%)}

}

ダークモード

code:style.css

@media (prefers-color-scheme: dark) {

.quick-launch {

&::before, &::after {

}

}

}