Template:Frootyeffect.css

.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%)
 }

}