16,055
edits
Changes
Jump to navigation
Jump to search
Template:Relatable suite (view source)
Revision as of 02:46, 25 January 2024
, 02:46, 25 January 2024no edit summary
Line 1:
Line 1:
animation: color-change 2s ease infinite;+ background-repeat: no-repeat;+ background-attachment: fixed;+
{{#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 */
}
}
}}
}}