Difference between revisions of "Twisted Toppings"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
(Hmm.)
imported>Felix
(Hmm some more.)
Line 286: Line 286:
 
.tab {
 
.tab {
 
     font-weight: bold;
 
     font-weight: bold;
     margin-top: -15em;
+
     margin-top: -19em;
 
     order: 2;
 
     order: 2;
     padding-top: 15em;
+
     padding-top: 19em;
 
}
 
}
 
#first {
 
#first {
Line 302: Line 302:
 
     font-size: 2em;
 
     font-size: 2em;
 
}
 
}
#panels a:hover {
+
tab a:hover, .tab a:active {
 
     text-decoration: none;
 
     text-decoration: none;
 
}
 
}
Line 332: Line 332:
 
#first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
#first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
     left: 0;
 
     left: 0;
 +
}
 +
.tab a {
 +
    animation: whichOne 60s infinite;
 +
    animation-timing-function: linear;
 +
}
 +
#first a, #first:target a, #second:target a, #third:target a {
 +
    animation-delay: 0s;
 +
    opacity: 1;
 +
    color: lime;
 +
}
 +
#second a, #first:target ~ #second a, #second:target ~ #third a, #third:target ~ #first a {
 +
    animation-delay: 20s;
 +
    opacity: 0.5;
 +
    color: cyan;
 +
}
 +
#third a, #first:target ~ #third a, #second:target ~ #first a, #third:target ~ #second a {
 +
    animation-delay: 40s;
 +
    opacity: 0.5;
 +
    color: cyan;
 
}
 
}
 
.panel {
 
.panel {
Line 339: Line 358:
 
#first-panel, #first:target ~ #first-panel {
 
#first-panel, #first:target ~ #first-panel {
 
     background: rgba(255,0,0,.25);
 
     background: rgba(255,0,0,.25);
    animation-delay: 0s;
 
 
     z-index: 5;
 
     z-index: 5;
    left: 0;
 
 
}  
 
}  
 
#second-panel, #first:target ~ #second-panel {
 
#second-panel, #first:target ~ #second-panel {
 
     background: rgba(0,0,255,.25);
 
     background: rgba(0,0,255,.25);
    animation-delay: 20s;
 
 
     z-index: 6;
 
     z-index: 6;
    left: -100%;
 
 
}  
 
}  
 
#third-panel, #first:target ~ #third-panel {
 
#third-panel, #first:target ~ #third-panel {
 
     background: rgba(255,255,0,.25);
 
     background: rgba(255,255,0,.25);
    animation-delay: 40s;
 
 
     z-index: 7;
 
     z-index: 7;
    left: -100%;
 
}
 
#second:target ~ #first-panel {
 
    animation-delay: 40s;
 
    left: -100%;
 
 
}
 
}
#second:target ~ #second-panel {
+
#first-panel, #first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
     animation-delay: 0s;
 
     animation-delay: 0s;
 
     left: 0;
 
     left: 0;
 
}
 
}
#second:target ~ #third-panel {
+
#second-panel, #first:target ~ #second-panel, #second:target ~ #third-panel, #third:target ~ #first-panel {
    animation-delay: 20s;
 
    left: -100%;
 
}
 
#third:target ~ #first-panel {
 
 
     animation-delay: 20s;
 
     animation-delay: 20s;
 
     left: -100%;
 
     left: -100%;
 
}
 
}
#third:target ~ #second-panel {
+
#third-panel, #first:target ~ #third-panel, #second:target ~ #first-panel, #third:target ~ #second-panel {
 
     animation-delay: 40s;
 
     animation-delay: 40s;
 
     left: -100%;
 
     left: -100%;
}
 
#third:target ~ #third-panel {
 
    animation-delay: 0s;
 
    left: 0;
 
 
}
 
}
 
#panels:hover .panel {
 
#panels:hover .panel {
Line 389: Line 390:
 
     100% {left: 100%;}
 
     100% {left: 100%;}
 
}
 
}
@keyframes fader {
+
@keyframes whichOne {
     0% {opacity: 0;}
+
     0% {opacity: 0.5; color: cyan;}
     3.33% {opacity: 1;}
+
     1.6666666666666667% {opacity: 1; color: lime;}
     33.33%{opacity: 1;}
+
     33.333333333333333%{opacity: 1; color: lime;}
     36.66% {opacity: 0;}
+
     35% {opacity: 0.5; color: cyan;}
     100% {opacity: 0;}
+
     100% {opacity: 0.5; color: cyan;}
 
}
 
}
 
}}
 
}}

Revision as of 01:48, 4 March 2017

TTbg.jpg
TTbigpizza.png
TTbigpizza2.png
Panel 1
Panel 2
Panel 3
Stuff goes here
And here also.