「テンプレート:色変化/style.css」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
(2人の利用者による、間の12版が非表示) | |||
98行目: | 98行目: | ||
background-color:#ffff00 | background-color:#ffff00 | ||
} | } | ||
} | |||
@keyframes k7{ | |||
0%{ | |||
color:#ffff00; | |||
background-color:#ff0000 | |||
} | |||
50%{ | |||
color:#ffff00; | |||
background-color:#ff0000 | |||
} | |||
51%{ | |||
color:#ff0000; | |||
background-color:#ffff00; | |||
} | |||
100%{ | |||
color:#ff0000; | |||
background-color:#ffff00 | |||
} | |||
} | |||
@keyframes k8{ | |||
0%{ | |||
color:#ff0000; | |||
background-color:#ffff00 | |||
} | |||
50%{ | |||
color:#ff0000; | |||
background-color:#ffff00 | |||
} | |||
51%{ | |||
color:#ffff00; | |||
background-color:#ff0000; | |||
} | |||
100%{ | |||
color:#ffff00; | |||
background-color:#ff0000 | |||
} | |||
} | |||
@keyframes k9 { | |||
0% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)} | |||
17% {background: linear-gradient(90deg, orange, yellow, green, blue, purple, red)} | |||
34% {background: linear-gradient(90deg, yellow, green, blue, purple, red, orange)} | |||
51% {background: linear-gradient(90deg, green, blue, purple, red, orange, yellow)} | |||
68% {background: linear-gradient(90deg, blue, purple, red, orange, yellow, green)} | |||
85% {background: linear-gradient(90deg, purple, red, orange, yellow, green, blue)} | |||
100% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)} | |||
} | |||
@keyframes k9-2 { | |||
0% {background: linear-gradient(90deg, yellow, tomato, tomato, maroon, maroon, maroon)} | |||
17% {background: linear-gradient(90deg, maroon, maroon, maroon, tomato, tomato, yellow)} | |||
34% {background: linear-gradient(90deg, maroon, maroon, tomato, tomato, yellow, tomato)} | |||
51% {background: linear-gradient(90deg, maroon, tomato, tomato, yellow, tomato, tomato)} | |||
68% {background: linear-gradient(90deg, tomato, tomato, yellow, tomato, tomato, maroon)} | |||
85% {background: linear-gradient(90deg, tomato, yellow, tomato, tomato, maroon, maroon)} | |||
100% {background: linear-gradient(90deg, yellow, tomato, tomato, maroon, maroon, maroon)} | |||
} | |||
@keyframes k10 { | |||
0% {color:red} | |||
20% {color:orange} | |||
40% {color:yellow} | |||
60% {color:green} | |||
80% {color:blue} | |||
100% {color:purple} | |||
} | } | ||
.chameleon{ | .chameleon{ | ||
animation:k1 4s infinite; | animation:k1 4s infinite; | ||
} | |||
.chameleon2{ | |||
animation:k10 5s linear infinite alternate; | |||
} | } | ||
.apearing{ | .apearing{ | ||
117行目: | 182行目: | ||
font-weight:bold; | font-weight:bold; | ||
animation:k6 500ms infinite; | animation:k6 500ms infinite; | ||
} | |||
.caution2{ | |||
font-weight:bold; | |||
animation:k7 500ms infinite; | |||
} | |||
.caution2b{ | |||
font-weight:bold; | |||
animation:k8 500ms infinite; | |||
} | |||
.grainbow { | |||
color:white; | |||
font-weight:bold; | |||
animation: k9 0.3s linear infinite normal; | |||
} | |||
.patrol { | |||
color:white; | |||
font-weight:bold; | |||
animation: k9-2 0.3s linear infinite normal; | |||
} | } |
3年1月23日 (黃) 01:12時点における最新版
@keyframes k1{
0%{
color:#ff0000;
}
10%{
color:#007fff;
}
20%{
color:#ff00ff;
}
30%{
color:#00ff00;
}
40%{
color:#ff007f;
}
50%{
color:#7f00ff;
}
60%{
color:#ff7f00;
}
70%{
color:#ff007f;
}
80%{
color:#0000ff;
}
90%{
color:#7fff00;
}
100%{
color:#00ff7f;
}
}
@keyframes k2{
from{
color:#ffffff;
}
to{
color:#000000;
}
}
@keyframes k3{
0%{
color:#ffffff;
}
50%{
color:#000000;
}
100%{
color:#ffffff;
}
}
@keyframes k4{
0%{
color:#ffffff;
}
50%{
color:#ffffff;
}
51%{
color:#000000;
}
100%{
color:#000000;
}
}
@keyframes k5{
0%{
color:#000000;
}
50%{
color:#000000;
}
51%{
color:#ffffff;
}
100%{
color:#ffffff;
}
}
@keyframes k6{
0%{
color:#ffff00;
background-color:#000000
}
50%{
color:#ffff00;
background-color:#000000
}
51%{
color:#000000;
background-color:#ffff00;
}
100%{
color:#000000;
background-color:#ffff00
}
}
@keyframes k7{
0%{
color:#ffff00;
background-color:#ff0000
}
50%{
color:#ffff00;
background-color:#ff0000
}
51%{
color:#ff0000;
background-color:#ffff00;
}
100%{
color:#ff0000;
background-color:#ffff00
}
}
@keyframes k8{
0%{
color:#ff0000;
background-color:#ffff00
}
50%{
color:#ff0000;
background-color:#ffff00
}
51%{
color:#ffff00;
background-color:#ff0000;
}
100%{
color:#ffff00;
background-color:#ff0000
}
}
@keyframes k9 {
0% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)}
17% {background: linear-gradient(90deg, orange, yellow, green, blue, purple, red)}
34% {background: linear-gradient(90deg, yellow, green, blue, purple, red, orange)}
51% {background: linear-gradient(90deg, green, blue, purple, red, orange, yellow)}
68% {background: linear-gradient(90deg, blue, purple, red, orange, yellow, green)}
85% {background: linear-gradient(90deg, purple, red, orange, yellow, green, blue)}
100% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)}
}
@keyframes k9-2 {
0% {background: linear-gradient(90deg, yellow, tomato, tomato, maroon, maroon, maroon)}
17% {background: linear-gradient(90deg, maroon, maroon, maroon, tomato, tomato, yellow)}
34% {background: linear-gradient(90deg, maroon, maroon, tomato, tomato, yellow, tomato)}
51% {background: linear-gradient(90deg, maroon, tomato, tomato, yellow, tomato, tomato)}
68% {background: linear-gradient(90deg, tomato, tomato, yellow, tomato, tomato, maroon)}
85% {background: linear-gradient(90deg, tomato, yellow, tomato, tomato, maroon, maroon)}
100% {background: linear-gradient(90deg, yellow, tomato, tomato, maroon, maroon, maroon)}
}
@keyframes k10 {
0% {color:red}
20% {color:orange}
40% {color:yellow}
60% {color:green}
80% {color:blue}
100% {color:purple}
}
.chameleon{
animation:k1 4s infinite;
}
.chameleon2{
animation:k10 5s linear infinite alternate;
}
.apearing{
animation:k2 4s 1;
}
.ap-and-disap{
animation:k3 4s infinite;
}
.flashing{
animation:k4 500ms infinite;
}
.flashing-reverse{
animation:k5 500ms infinite;
}
.caution{
font-weight:bold;
animation:k6 500ms infinite;
}
.caution2{
font-weight:bold;
animation:k7 500ms infinite;
}
.caution2b{
font-weight:bold;
animation:k8 500ms infinite;
}
.grainbow {
color:white;
font-weight:bold;
animation: k9 0.3s linear infinite normal;
}
.patrol {
color:white;
font-weight:bold;
animation: k9-2 0.3s linear infinite normal;
}