Difference between revisions of "Template:Relatable suite"
Jump to navigation
Jump to search
Tag: Undo |
Coppersalts (talk | contribs) |
||
| Line 1: | Line 1: | ||
{{#css: | {{#css: | ||
| − | body { | + | body::before { |
| − | + | position:fixed; | |
| − | + | top:0; | |
| − | + | left:0; | |
| + | right:0; | ||
| + | /*bottom:0;*/ | ||
| + | content: ""; | ||
| + | width:100%; | ||
| + | height:100%; | ||
| + | animation: color-change 4s ease infinite; | ||
| + | background-repeat: no-repeat; | ||
| + | background-attachment: fixed; | ||
| + | z-index:-1; | ||
} | } | ||
| + | body::after { | ||
| + | position:fixed; | ||
| + | top:0; | ||
| + | left:0; | ||
| + | right:0; | ||
| + | /*bottom:0;*/ | ||
| + | content: ""; | ||
| + | width:100%; | ||
| + | height:100%; | ||
| + | animation: color-change2 4s ease infinite; | ||
| + | background-repeat: no-repeat; | ||
| + | background-attachment: fixed; | ||
| + | z-index:-1; | ||
| + | } | ||
| + | /*body { | ||
| + | animation: color-change 2s ease infinite; | ||
| + | background-repeat: no-repeat; | ||
| + | background-attachment: fixed; | ||
| + | }*/ | ||
#mw-page-base { | #mw-page-base { | ||
visibility: hidden; | visibility: hidden; | ||
| Line 16: | Line 44: | ||
} | } | ||
@keyframes color-change { | @keyframes color-change { | ||
| − | 0%,100% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); } | + | 0%,100% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 0; } /* 1 */ |
| − | 33% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); } | + | 16.5% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 1; } /* 1 */ |
| − | 66% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); } | + | 33% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 0; } /* 3 */ |
| + | 50% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 1; } /* 3 */ | ||
| + | 66% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 0; } /* 2 */ | ||
| + | 82.5% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 1; } /* 2 */ | ||
| + | } | ||
| + | @keyframes color-change2 { | ||
| + | 0%,100% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 1; } /* 3 */ | ||
| + | 16.5% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 0; } /* 2 */ | ||
| + | 33% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 1; } /* 2 */ | ||
| + | 50% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 0; } /* 1 */ | ||
| + | 66% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 1; } /* 1 */ | ||
| + | 82.5% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 0; } /* 3 */ | ||
} | } | ||
}} | }} | ||