Template:Colored dot: Difference between revisions
Jump to navigation
Jump to search
Simplifying into a template for future use |
mNo edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
* { | |||
animation:20s ease-in-out 10s infinite alternate fade, 3s ease-in-out 20s infinite alternate noglasses, 15000s linear infinite spin, linear infinite marquee; | |||
} | |||
@keyframes noglasses { | |||
from { | |||
filter: blur(.7px); } | |||
50% { | |||
filter:blur(0px) | |||
} | |||
55% { | |||
filter:blur(1px) | |||
} | |||
70%{ | |||
filter:blur(0px) | |||
} | |||
75% { filter:blur(.6px)} | |||
82% { filter:blur(0px)} | |||
to { | |||
filter: blur(2px); | |||
} | |||
} | |||
@keyframes fade { | |||
90% {opacity:1} | |||
to { | |||
opacity:0; | |||
filter:blur(10px) | |||
} | |||
} | |||
@keyframes spin { | |||
from { | |||
transform:rotate(360deg) | |||
} | |||
to { | |||
transform:rotate(0deg) | |||
} | |||
} | |||
.marquee { | |||
margin: 0 auto; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
position: absolute; | |||
} | |||
.marquee2 { | |||
margin: 0 auto; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
position: absolute; | |||
} | |||
.marquee span { | |||
display: inline-block; | |||
padding-left: 100%; | |||
animation: marquee 5s linear infinite; | |||
} | |||
.marquee2 span { | |||
display: inline-block; | |||
padding-left: 100%; | |||
animation: marquee2 2s linear infinite; | |||
} | |||
@keyframes marquee { | |||
0% { | |||
transform: translate(0, 0); | |||
} | |||
100% { | |||
transform: translate(-200%, 0); | |||
} | |||
} | |||
@keyframes marquee2 { | |||
0% { | |||
transform: translate(0, 0); | |||
} | |||
100% { | |||
transform: translate(-100%, 0); | |||
} | |||
} | |||
Revision as of 08:26, 19 November 2025
- {
animation:20s ease-in-out 10s infinite alternate fade, 3s ease-in-out 20s infinite alternate noglasses, 15000s linear infinite spin, linear infinite marquee;
}
@keyframes noglasses {
from {
filter: blur(.7px); }
50% {
filter:blur(0px)
}
55% {
filter:blur(1px)
}
70%{
filter:blur(0px)
}
75% { filter:blur(.6px)}
82% { filter:blur(0px)}
to {
filter: blur(2px);
}
} @keyframes fade {
90% {opacity:1}
to {
opacity:0;
filter:blur(10px)
}
} @keyframes spin {
from {
transform:rotate(360deg)
}
to {
transform:rotate(0deg)
}
} .marquee {
margin: 0 auto; white-space: nowrap; overflow: hidden; position: absolute;
} .marquee2 {
margin: 0 auto; white-space: nowrap; overflow: hidden; position: absolute;
} .marquee span {
display: inline-block; padding-left: 100%; animation: marquee 5s linear infinite;
}
.marquee2 span {
display: inline-block; padding-left: 100%; animation: marquee2 2s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-200%, 0);
}
}
@keyframes marquee2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}