UserCSS:電光掲示板
2024/05/10 生き返ったみたい
2024/4/17 死んでいる……
code:style.css
:root{
/* --bulletin-board: "このプロジェクトではメンバーを募集中です。どなたでも参加できます。"; /* */
--board-text: "このプロジェクトではメンバーを募集中です。どなたでも参加できます。"; /* */
--board-color : darkgray;
--board-background-color : lightgray;
}
code:stylexx.css
.app::before {
position: absolute;
top: 40px;
content: var(--board-text); /* */
color: var(--board-color); /* */
background-color: var(--board-background-color); /* */
width: 100%;
left:0;
text-align: center;
}
code:style.css
.app{
overflow-x: clip;
position: relative;
}
.quick-launch {
margin-top: 2em;
&::before, &::after {
position: absolute;
left: 0;
/* top: 30px; */
top: 40px;
/* font-size: 80px; */
font-size: 40px;
text-indent: 1em;
content: var(--board-text); /* */
color: var(--board-color); /* */
background-color: var(--board-background-color); /* */
font-weight: 700;
white-space: nowrap;
font-family: 'jost','Zen Kaku Gothic New';
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%)}
}
UserCSS.icon