電光掲示板UserCSS
code:style.css
:root{--bulletin-board: "Welcome to Geek Space!";}
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: 50px;
font-size: 40px;
text-indent: 1em;
font-weight: 700;
white-space: nowrap;
font-family: "Electrolize", sans-serif;
z-index: -1;
letter-spacing: 0.3em;
text-indent: 0.3em;
@media screen and (min-width: 992px) { /* 多分間違ってる */
letter-spacing: 0.5em;
text-indent: 1em;
}
}
}
code:style.css
@media (min-width: 992px){
.quick-launch::before{animation: marquee 40s linear infinite;}
.quick-launch::after{animation: marquee2 40s linear infinite;}
}
@media (min-width: 768px) and (max-width: 991px){
.quick-launch::before{animation: marquee 30s linear infinite;}
.quick-launch::after{animation: marquee2 30s linear infinite;}
}
@media (max-width: 767px){
.quick-launch::before{animation: marquee 25s linear infinite;}
.quick-launch::after{animation: marquee2 25s linear infinite;}
}
@keyframes marquee{
0%{transform: translateX(0%)}
100%{transform:translateX(-100%)}
}
@keyframes marquee2{
0%{transform: translateX(100%)}
100%{transform:translateX(0%)}
}