16,055
edits
Changes
Template:Relatable suite (view source)
Revision as of 04:17, 25 January 2024
, 04:17, 25 January 2024no edit summary
Line 1:
Line 1:
{{#css:
{{#css:
−body::before {
+body::after {
position:fixed;
position:fixed;
top:0;
top:0;
Line 9:
Line 9:
width:100%;
width:100%;
height:100%;
height:100%;
−animation: color-change 6s ease infinite;
+animation: color-change2 8s linear infinite;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: fixed;
z-index:-1;
z-index:-1;
}
}
−body::after {
+body::before {
position:fixed;
position:fixed;
top:0;
top:0;
Line 23:
Line 23:
width:100%;
width:100%;
height:100%;
height:100%;
−animation: color-change2 6s ease infinite;
+animation: color-change 8s linear infinite;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: fixed;
Line 44:
Line 44:
}
}
@keyframes color-change {
@keyframes color-change {
−0%,100% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 0; } /* 1 */
+0%,100% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 0; } /* 5 */
−16.5% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 1; } /* 1 */
+0.001% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 0; } /* 1 */
−33% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 0; } /* 3 */
+16.5% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 1; } /* 1 */
−50% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 1; } /* 3 */
+33% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 0; } /* 1 */
−66% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 0; } /* 2 */
+33.001% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 0; } /* 3 */
−82.5% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 1; } /* 2 */
+50% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 1; } /* 3 */
+66% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 0; } /* 3 */
+66.001% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 0; } /* 5 */
+82.5% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 1; } /* 5 */
}
}
@keyframes color-change2 {
@keyframes color-change2 {
−0%,100% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 1; } /* 3 */
+0%,100% { background-image: radial-gradient(#99BBF0 0%, #37D2FF 25%, #fff985 75%, #FFCFB1 100%); opacity: 1; } /* 6 */
−16.5% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 0; } /* 2 */
+16.5% { background-image: radial-gradient(#99BBF0 0%, #37D2FF 25%, #fff985 75%, #FFCFB1 100%); opacity: 0; } /* 6 */
−33% { background-image: radial-gradient(#37D2FF 0%, #FEA3E0 50%, #fff985 100%); opacity: 1; } /* 2 */
+16.501% { background-image: radial-gradient(#9DE6C1 0%, #fff985 25%, #FEA3E0 75%, #99BBF0 100%); opacity: 0; } /* 2 */
−50% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 0; } /* 1 */
+33% { background-image: radial-gradient(#9DE6C1 0%, #fff985 25%, #FEA3E0 75%, #99BBF0 100%); opacity: 1; } /* 2 */
−66% { background-image: radial-gradient(#FEA3E0 0%, #fff985 50%, #37D2FF 100%); opacity: 1; } /* 1 */
+50% { background-image: radial-gradient(#9DE6C1 0%, #fff985 25%, #FEA3E0 75%, #99BBF0 100%); opacity: 0; } /* 2 */
−82.5% { background-image: radial-gradient(#fff985 0%, #37D2FF 50%, #FEA3E0 100%); opacity: 0; } /* 3 */
+50.001% { background-image: radial-gradient(#FFCFB1 0%, #FEA3E0 25%, #37D2FF 75%, #9DE6C1 100%); opacity: 0; } /* 4 */
+66% { background-image: radial-gradient(#FFCFB1 0%, #FEA3E0 25%, #37D2FF 75%, #9DE6C1 100%); opacity: 1; } /* 4 */
+82.5% { background-image: radial-gradient(#FFCFB1 0%, #FEA3E0 25%, #37D2FF 75%, #9DE6C1 100%); opacity: 0; } /* 4 */
+82.501% { background-image: radial-gradient(#99BBF0 0%, #37D2FF 25%, #fff985 75%, #FFCFB1 100%); opacity: 0; } /* 6 */
}
}
}}
}}