「テンプレート:色変化/style.css」の版間の差分

提供：WikiWiki
ナビゲーションに移動 検索に移動
(ページの作成:「@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; } } @ke…」)
 
編集の要約なし
 
(2人の利用者による、間の20版が非表示)
57行目: 57行目:
color:#ffffff;
color:#ffffff;
}
}
1%{
50%{
color:#000000;
}
2%{
color:#ffffff;
color:#ffffff;
}
}
3%{
51%{
color:#000000;
color:#000000;
}
}
4%{
100%{
color:#ffffff;
}
5%{
color:#000000;
color:#000000;
}
}
6%{
}
color:#ffffff;
@keyframes k5{
}
0%{
7%{
color:#000000;
color:#000000;
}
}
8%{
50%{
color:#ffffff;
}
9%{
color:#000000;
color:#000000;
}
}
10%{
51%{
color:#ffffff;
color:#ffffff;
}
}
11%{
100%{
color:#000000;
}
12%{
color:#ffffff;
color:#ffffff;
}
}
13%{
}
color:#000000;
@keyframes k6{
0%{
color:#ffff00;
background-color:#000000
}
}
14%{
50%{
color:#ffffff;
color:#ffff00;
background-color:#000000
}
}
15%{
51%{
color:#000000;
color:#000000;
background-color:#ffff00;
}
}
16%{
100%{
color:#ffffff;
}
17%{
color:#000000;
color:#000000;
background-color:#ffff00
}
}
18%{
}
color:#ffffff;
@keyframes k7{
}
0%{
19%{
color:#ffff00;
color:#000000;
background-color:#ff0000
}
20%{
color:#ffffff;
}
21%{
color:#000000;
}
22%{
color:#ffffff;
}
23%{
color:#000000;
}
24%{
color:#ffffff;
}
25%{
color:#000000;
}
26%{
color:#ffffff;
}
27%{
color:#000000;
}
28%{
color:#ffffff;
}
29%{
color:#000000;
}
30%{
color:#ffffff;
}
31%{
color:#000000;
}
32%{
color:#ffffff;
}
33%{
color:#000000;
}
34%{
color:#ffffff;
}
35%{
color:#000000;
}
36%{
color:#ffffff;
}
37%{
color:#000000;
}
38%{
color:#ffffff;
}
39%{
color:#000000;
}
40%{
color:#ffffff;
}
41%{
color:#000000;
}
42%{
color:#ffffff;
}
43%{
color:#000000;
}
44%{
color:#ffffff;
}
45%{
color:#000000;
}
46%{
color:#ffffff;
}
47%{
color:#000000;
}
48%{
color:#ffffff;
}
49%{
color:#000000;
}
}
50%{
50%{
color:#ffffff;
color:#ffff00;
background-color:#ff0000
}
}
51%{
51%{
color:#000000;
color:#ff0000;
}
background-color:#ffff00;
52%{
color:#ffffff;
}
53%{
color:#000000;
}
54%{
color:#ffffff;
}
55%{
color:#000000;
}
56%{
color:#ffffff;
}
57%{
color:#000000;
}
58%{
color:#ffffff;
}
59%{
color:#000000;
}
60%{
color:#ffffff;
}
61%{
color:#000000;
}
62%{
color:#ffffff;
}
63%{
color:#000000;
}
64%{
color:#ffffff;
}
65%{
color:#000000;
}
66%{
color:#ffffff;
}
67%{
color:#000000;
}
68%{
color:#ffffff;
}
69%{
color:#000000;
}
70%{
color:#ffffff;
}
71%{
color:#000000;
}
72%{
color:#ffffff;
}
73%{
color:#000000;
}
74%{
color:#ffffff;
}
75%{
color:#000000;
}
76%{
color:#ffffff;
}
77%{
color:#000000;
}
78%{
color:#ffffff;
}
79%{
color:#000000;
}
80%{
color:#ffffff;
}
81%{
color:#ffffff;
}
82%{
color:#000000;
}
83%{
color:#ffffff;
}
84%{
color:#000000;
}
85%{
color:#ffffff;
}
86%{
color:#000000;
}
87%{
color:#ffffff;
}
88%{
color:#000000;
}
89%{
color:#000000;
}
90%{
color:#ffffff;
}
91%{
color:#000000;
}
92%{
color:#ffffff;
}
93%{
color:#000000;
}
94%{
color:#ffffff;
}
95%{
color:#000000;
}
96%{
color:#ffffff;
}
97%{
color:#000000;
}
98%{
color:#ffffff;
}
99%{
color:#000000;
}
}
100%{
100%{
color:#ffffff;
color:#ff0000;
background-color:#ffff00
}
}
}
}
@keyframes k5{
@keyframes k8{
0%{
0%{
color:#ffff00;
color:#ff0000;
background-color:#000000
background-color:#ffff00
}
}
50%{
50%{
color:#ffff00;
color:#ff0000;
background-color:#000000
background-color:#ffff00
}
}
51%{
51%{
color:#000000;
color:#ffff00;
background-color:#ffff00;
background-color:#ff0000;
}
}
100%{
100%{
color:#000000;
color:#ffff00;
background-color:#ffff00
background-color:#ff0000
}
}
}
}
.a1{
@keyframes k9 {
animation-name:k1;
  0% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)}
animation-duration:4s;
  17% {background: linear-gradient(90deg, orange, yellow, green, blue, purple, red)}
animation-iteration-count:infinite;
  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;
}
}
.a2{
.caution2{
animation-name:k2;
font-weight:bold;
animation-duration:3s;
animation:k7 500ms infinite;
animation-iteration-count:1;
}
}
.a3{
.caution2b{
animation-name:k3;
font-weight:bold;
animation-duration:4s;
animation:k8 500ms infinite;
animation-iteration-count:infinite;
}
}
.a4{
.grainbow {
animation-name:k4;
  color:white;
animation-duration:10s;
  font-weight:bold;
animation-iteration-count:infinite
  animation: k9 0.3s linear infinite normal;
}
}
.a5{
.patrol {
animation-name:k5;
  color:white;
animation-duration:250ms;
  font-weight:bold;
animation-iteration-count:infinite;
  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;
}
「https://ja.wikiwiki.li/index.php?title=テンプレート:色変化/style.css&oldid=11909」から取得