Bob: Created page with ".content { position: relative; } .effect h2 { color: #fff; font-size: 8em; position: absolute; transform: translate(-50%, -50%); } .effect{ color: transparent; } .effect { color: #FFA500; animation: animate 4s ease-in-out infinite; } /This is the animation for the juice effect If you want to edit it open up the froot template and hit inspect element-> style editor -> style sheet 4. so you can edit it and test in real time before publishing / @keyfra..."

2026-01-04T00:00:38Z

Created page with ".content { position: relative; } .effect h2 { color: #fff; font-size: 8em; position: absolute; transform: translate(-50%, -50%); } .effect{ color: transparent; } .effect { color: #FFA500; animation: animate 4s ease-in-out infinite; } This is the animation for the juice effect If you want to edit it open up the froot template and hit inspect element-> style editor -> style sheet 4. so you can edit it and test in real time before publishing: @keyfra..."

New page

.content {
position: relative;
}

.effect h2 {
color: #fff;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}

.effect{
color: transparent;
}

.effect {
color: #FFA500;
animation: animate 4s ease-in-out infinite;
}
/*This is the animation for the juice effect If you want to edit it open up the froot template and hit inspect element-> style editor -> style sheet 4. so you can edit it and test in real time
before publishing */
@keyframes animate {

0%,
100% { /* xposition%,yposition. the more you add here the more realistic the liquid effect will look/reduce sharp edges. However to much may cause performance issues for phonegods*/
clip-path:polygon(0%5%,16%10%,33%5%,54%9%,70%7%,84%6.2%,100%7%,100%100%,0%100%)
}
50% { /*second animation. the template will cycle between the one on the top and the one on the bottom forever creating the illusion of liquid. may add more than just 2 states*/
clip-path:polygon(0%8%,16%7%,34%11.6%,51%11.2%,67%12.0%,84%12.5%,100%10.6%,100%100%,0%100%)
}
}

Template:Froot/frootyeffect.css - Revision history