38 lines
1.3 KiB
CSS
38 lines
1.3 KiB
CSS
|
label.canvasitem {
|
||
|
|
padding: 10px;
|
||
|
|
margin: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.canvasitem.rainbow1,
|
||
|
|
image.rainbow1 {
|
||
|
|
background: linear-gradient(140deg,red,orange,yellow,green,blue,purple);
|
||
|
|
}
|
||
|
|
|
||
|
|
.canvasitem.rainbow2,
|
||
|
|
image.rainbow2 {
|
||
|
|
animation: rainbow2 1s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rainbow2 {
|
||
|
|
0% { background: linear-gradient(0deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
25% { background: linear-gradient(90deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
50% { background: linear-gradient(180deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
75% { background: linear-gradient(270deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
100% { background: linear-gradient(360deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.canvasitem.rainbow3,
|
||
|
|
image.rainbow3 {
|
||
|
|
animation: rainbow3 1s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rainbow3 {
|
||
|
|
0% { background: linear-gradient(140deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
16.6% { background: linear-gradient(140deg,purple,red,orange,yellow,green,blue); }
|
||
|
|
33.2% { background: linear-gradient(140deg,blue,purple,red,orange,yellow,green); }
|
||
|
|
50% { background: linear-gradient(140deg,green,blue,purple,red,orange,yellow); }
|
||
|
|
66.6% { background: linear-gradient(140deg,yellow,green,blue,purple,red,orange); }
|
||
|
|
83.2% { background: linear-gradient(140deg,orange,yellow,green,blue,purple,red); }
|
||
|
|
100% { background: linear-gradient(140deg,red,orange,yellow,green,blue,purple); }
|
||
|
|
}
|