Difference between revisions of "Twisted Toppings"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
(Experimentin'. Didn't actually mean to save yet. Oops!)
imported>Felix
(Hmm.)
Line 282: Line 282:
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     position: relative;
 
     position: relative;
 +
    overflow: hidden;
 
}
 
}
 
.tab {
 
.tab {
Line 309: Line 310:
 
}
 
}
 
.panel {
 
.panel {
−
    opacity: 0;
 
−
    //visibility: hidden;
 
−
    //display: none;
 
 
     order: 0;
 
     order: 0;
 
     text-indent: 1.5em;
 
     text-indent: 1.5em;
 
     margin-bottom: 0.5em;
 
     margin-bottom: 0.5em;
 
     min-height: 100px;
 
     min-height: 100px;
−
     width: 100%;
+
     width: calc(100% - 2px);
 
     border: 1px dotted rgba(255,255,255,.75);
 
     border: 1px dotted rgba(255,255,255,.75);
 
     background: rgba(0,0,0,.4);
 
     background: rgba(0,0,0,.4);
Line 325: Line 323:
 
}
 
}
 
#first-panel {
 
#first-panel {
−
     opacity: 1;
+
     left: 0;
−
    //visibility: visible;
 
 
     position: relative;
 
     position: relative;
−
     //display: block;
+
     width: 100%;
 
}
 
}
 
:target ~ #first-panel {
 
:target ~ #first-panel {
−
     opacity: 0;
+
     left: -100%;
−
    //visibility: hidden;
 
−
    //display: none;
 
 
}
 
}
 
#first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
#first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
−
     opacity: 1;
+
     left: 0;
−
    //visibility: visible;
 
−
    //display: block;
 
 
}
 
}
−
#first-panel {
+
.panel {
−
    background: rgba(255,0,0,.5);
+
     animation: moveIt 60s infinite;
−
     animation: mymove 60s infinite;
 
 
     animation-timing-function: linear;
 
     animation-timing-function: linear;
 +
}
 +
#first-panel, #first:target ~ #first-panel {
 +
    background: rgba(255,0,0,.25);
 +
    animation-delay: 0s;
 
     z-index: 5;
 
     z-index: 5;
 +
    left: 0;
 
}  
 
}  
−
#second-panel {
+
#second-panel, #first:target ~ #second-panel {
−
     background: rgba(0,0,255,.5);
+
     background: rgba(0,0,255,.25);
−
    animation: mymove 60s infinite;
 
−
    animation-timing-function: linear;
 
 
     animation-delay: 20s;
 
     animation-delay: 20s;
 
     z-index: 6;
 
     z-index: 6;
−
     opacity: 0;
+
     left: -100%;
 
}  
 
}  
−
#third-panel {
+
#third-panel, #first:target ~ #third-panel {
−
     background: rgba(255,255,0,.5);
+
     background: rgba(255,255,0,.25);
−
    animation: mymove 60s infinite;
 
−
    animation-timing-function: linear;
 
 
     animation-delay: 40s;
 
     animation-delay: 40s;
 
     z-index: 7;
 
     z-index: 7;
−
     opacity: 0;
+
     left: -100%;
 +
}
 +
#second:target ~ #first-panel {
 +
    animation-delay: 40s;
 +
    left: -100%;
 +
}
 +
#second:target ~ #second-panel {
 +
    animation-delay: 0s;
 +
    left: 0;
 +
}
 +
#second:target ~ #third-panel {
 +
    animation-delay: 20s;
 +
    left: -100%;
 +
}
 +
#third:target ~ #first-panel {
 +
    animation-delay: 20s;
 +
    left: -100%;
 +
}
 +
#third:target ~ #second-panel {
 +
    animation-delay: 40s;
 +
    left: -100%;
 +
}
 +
#third:target ~ #third-panel {
 +
    animation-delay: 0s;
 +
    left: 0;
 +
}
 +
#panels:hover .panel {
 +
    animation-play-state: paused;
 +
}
 +
@keyframes moveIt {
 +
    0% {left: -100%;}
 +
    3.3333333333333333% {left: 0px;}
 +
    33.333333333333333%{left: 0px;}
 +
    36.666666666666667% {left: 100%;}
 +
    100% {left: 100%;}
 
}
 
}
−
@keyframes mymove {
+
@keyframes fader {
 
     0% {opacity: 0;}
 
     0% {opacity: 0;}
 
     3.33% {opacity: 1;}
 
     3.33% {opacity: 1;}

Revision as of 01:06, 4 March 2017

TTbg.jpg
TTbigpizza.png
TTbigpizza2.png
 
  • Crusts
    • Deep Dish
    • Garlic Bread
    • Pan
    • Pita
    • Potato Chip
    • Pretzel
    • Thin
    • Waffle
  • Sauces
    • Alfredo
    • BBQ Sauce
    • Butter
    • Caesar
    • Chocolate
    • Cream Cheese
    • Garlic Butter
    • Honey
    • Hot Sauce
    • Hummus
    • Jelly
    • Marinara
    • Marshmallow Sauce
    • Mayo
    • Nutella
    • Olive Oil
    • Peanut Butter
    • Pesto
    • Ranch
    • Sour Cream
    • Strawberry Balsamic
    • Tzatziki sauce
  • Cheeses
    • American
    • Asiago
    • Bleu Cheese
    • Brie
    • Cheddar
    • Colby
    • Cottage Cheese
    • Goat Cheese
    • Gouda
    • Mascarpone
    • Monterey Jack
    • Mozzarella
    • Parmesan
    • Provolone
    • Ricotta
    • Romano
  • Fruit
    • Blueberries
    • Cherries
    • Coconut
    • Figs
    • Granola
    • Grilled Watermelon
    • Lemon
    • Peaches
  • Veggies
    • Artichoke
    • Arugula
    • Avocado
    • Banana Peppers
    • Black Olives
    • Broccoli
    • Capers
    • Caramelized Onion
    • Corn
    • Cucumber
    • Diced Tomatoes
    • Eggplant
    • Green Onion
    • Green Peppers
    • Jalapenos
    • Mushrooms
    • Onions
    • Peas
    • Pickles
    • Roasted Garlic
    • Roasted Red Peppers
    • Sliced Tomatoes
    • Spinach
    • Sun-Dried Tomatoes
    • Sweet Potato
    • Swiss Chard
  • Protein
    • Alligator
    • Bacon
    • Beef
    • Boiled Egg
    • Bratwurst
    • Chicken
    • Crab Meat
    • Eggs
    • Emu
    • Haggis
    • Ham
    • Hot Dogs
    • Italian Sausage
    • Kangaroo
    • Lamb
    • Mussels
    • Octopus
    • Pine Nuts
    • Pepperoni
    • Roast Beef
    • Salami
    • Salmon
    • Shrimp
    • Sloppy Joe
    • Spam
    • Squid
    • Sunflower Seeds
    • Tofu
    • Tuna
  • Spices
    • Allspice
    • Cilantro
    • Cinnamon
    • Cumin
    • Oregano
    • Paprika
    • Parsley
    • Pepper
    • Peppermint
    • Pumpkin Pie Spice
    • Rosemary
    • Sage
    • Salt
    • Thyme
  • Other
    • Cotton Candy
    • Macaroni
    • Marshmallow
    • Sliced Egg Rolls
Panel 1
Panel 2
Panel 3
Stuff goes here
And here also.
Retrieved from "https://cityofhopemush.net/index.php?title=Twisted_Toppings&oldid=115556"