電光掲示板UserCSS
code:style.css
.quick-launch .right-box::before,.quick-launch .right-box::after{
content: var(--bulletin-board);
}
code:style.css
/* .quick-launch .right-box:after{
content: "今年は残り29日です。";
} */
せっかくだしいろいろ使っていこうnomadoor.icon
ぎゃあああああああ！yuyasurarin.icon
電光掲示板みたいに動かす made by ChatGPT.icon
大分修正しましたnomadoor.icon
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 25s linear infinite;}
.quick-launch .right-box::after{animation: marquee2 25s linear infinite;}
}
@media (max-width: 767px){
.quick-launch .right-box::before{animation: marquee 15s linear infinite;}
.quick-launch .right-box::after{animation: marquee2 15s 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: hidden; /* スマホで横スクロールが出るのの対策 */
position: relative;
}
.quick-launch .right-box::before,.quick-launch .right-box::after{
position: absolute;
left: 0;
top: 30px;
font-size: 80px;
text-indent: 1em;
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;}
}
.appにoverflow: hiddenを掛けているせいで、page-menuのstickyが死んでいるnomadoor.icon
対処方法が思いつかない…