UserCSS:電光掲示板
code:style.css
:root{
/* --bulletin-board: "タスク管理何もわからない"; /* */
--bulletin-board: "春日山霞たなびき心ぐく照れる月夜にひとりかも寝む"; /* */
/* --bulletin-board: "このプロジェクトではメンバーを募集中です。どなたでも参加できます。"; /* */
--board-color : lightgray;
}
code:style.css
.quick-launch .right-box::before,.quick-launch .right-box::after{
content: var(--bulletin-board);
}
code:style.css
@media (min-width: 992px){
.quick-launch .right-box::before{animation: marquee 40s linear infinite;}
.quick-launch .right-box::after{animation: marquee2 40s linear infinite;}
}
@media (min-width: 768px) and (max-width: 991px){
.quick-launch .right-box::before{animation: marquee 30s linear infinite;}
.quick-launch .right-box::after{animation: marquee2 30s linear infinite;}
}
@media (max-width: 767px){
.quick-launch .right-box::before{animation: marquee 25s linear infinite;}
.quick-launch .right-box::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%)}
}
code:style.css
.app{
overflow-x: clip;
position: relative;
}
.quick-launch .right-box::before,.quick-launch .right-box::after{
position: absolute;
left: 0;
top: 30px;
/* font-size: 80px; /* */
font-size: 40px; /* */
text-indent: 1em;
color: var(--board-color, black);
font-weight: 700;
white-space: nowrap;
font-family: 'jost','Zen Kaku Gothic New';
z-index: -1;
}
@media screen{
.quick-launch .right-box::before,.quick-launch .right-box::after{
letter-spacing: 0.3em; text-indent: 0.3em;}
}
@media screen and (min-width: 992px){
.quick-launch .right-box::before,.quick-launch .right-box::after{
letter-spacing: 0.5em; text-indent: 1em;}
}