Posted in
8926
6:23 am, September 7, 2021
CSS Goey footer red blotched gloopy footer animation
Here we have an interesting animation added to the bottom of the footer area making it look kinda like its on fire, or paint glooping up from it. Nice effect, not sure where i would use this one, but i like it.
The original code was in PUG and SCSS so i have compiled it into HTML and CSS for the following demo.
Nice animation effects here.
Demo Animation
Sources
CSS Goey footer red blotched gloopy footer animation Demo
View Demo Full Screen View Demo New Tab
CSS Goey footer red blotched gloopy footer animation Code
HTML
<div class="main"></div>
<div class="footer">
<div class="bubbles">
<div class="bubble" style="--size:2.282674538989423rem; --distance:6.846527212401166rem; --position:41.03119540088471%; --time:3.838450601671796s; --delay:-2.540979569123983s;"></div>
<div class="bubble" style="--size:2.1541428519346244rem; --distance:8.71829799540899rem; --position:52.04353500998365%; --time:3.868712132829292s; --delay:-3.093062371107291s;"></div>
<div class="bubble" style="--size:2.085285368709286rem; --distance:8.560474003218987rem; --position:23.87322052202277%; --time:3.733563003166545s; --delay:-3.541657533038238s;"></div>
<div class="bubble" style="--size:4.567997330642863rem; --distance:6.240128245797101rem; --position:15.790520521853303%; --time:3.0467297386203005s; --delay:-3.7690602167619147s;"></div>
<div class="bubble" style="--size:2.397892711659007rem; --distance:8.559726403716507rem; --position:89.5562224525649%; --time:2.6680589116827766s; --delay:-3.444148109605637s;"></div>
<div class="bubble" style="--size:3.6977922952790916rem; --distance:9.873299664972109rem; --position:-3.552799779845446%; --time:2.4533516901902415s; --delay:-3.288233188670648s;"></div>
<div class="bubble" style="--size:3.1856245193827224rem; --distance:8.682459005449616rem; --position:92.68386975918779%; --time:2.7185557065628374s; --delay:-2.8353013566397713s;"></div>
<div class="bubble" style="--size:3.8783289364371143rem; --distance:7.881922920560344rem; --position:11.99538315505649%; --time:3.436699844987952s; --delay:-3.2647169097699003s;"></div>
<div class="bubble" style="--size:2.0708403933046133rem; --distance:7.434817788647906rem; --position:44.48003639149991%; --time:3.3399890693529635s; --delay:-3.2849177092859896s;"></div>
<div class="bubble" style="--size:3.9897305679866344rem; --distance:7.733426432820379rem; --position:67.9638003396002%; --time:3.3216827940866755s; --delay:-3.5564028693855003s;"></div>
<div class="bubble" style="--size:4.0363683333216525rem; --distance:6.82047531364805rem; --position:9.666765213226952%; --time:3.4417056275174187s; --delay:-2.980050779740832s;"></div>
<div class="bubble" style="--size:4.245488305212032rem; --distance:9.972758793312494rem; --position:104.8738993559711%; --time:3.2506038266245767s; --delay:-2.817575029102809s;"></div>
<div class="bubble" style="--size:4.983123522940318rem; --distance:8.71624731199448rem; --position:58.0210060696171%; --time:2.7886291402898116s; --delay:-2.6340960631550527s;"></div>
<div class="bubble" style="--size:5.0163149625338095rem; --distance:7.721140857830547rem; --position:2.8489793999525848%; --time:3.7661935374560973s; --delay:-3.0717757051674397s;"></div>
<div class="bubble" style="--size:4.862600501778472rem; --distance:6.16557893998054rem; --position:69.79742508937117%; --time:2.559492084281713s; --delay:-3.0488494483847135s;"></div>
<div class="bubble" style="--size:5.492771682010695rem; --distance:7.644303889867226rem; --position:20.330824884655243%; --time:2.8109047897321626s; --delay:-3.643650188442065s;"></div>
<div class="bubble" style="--size:4.723579458716859rem; --distance:9.229915474736584rem; --position:24.78410675315647%; --time:3.463765666568444s; --delay:-2.209241364865829s;"></div>
<div class="bubble" style="--size:2.4466394130225266rem; --distance:6.9807134728896445rem; --position:37.61433460000441%; --time:3.1843807198501612s; --delay:-2.770973583778531s;"></div>
<div class="bubble" style="--size:3.4644172947151732rem; --distance:7.003958939272795rem; --position:8.78762443224413%; --time:2.5141327694058884s; --delay:-3.6152865133224963s;"></div>
<div class="bubble" style="--size:2.145941984562956rem; --distance:8.804202774414234rem; --position:58.09320182895645%; --time:2.387367025224768s; --delay:-2.8370239216719466s;"></div>
<div class="bubble" style="--size:4.247563282832554rem; --distance:9.581543925712946rem; --position:79.3618351304081%; --time:3.9442629457360057s; --delay:-3.3286439390857896s;"></div>
<div class="bubble" style="--size:2.2656661342780158rem; --distance:9.315248696577129rem; --position:64.74070720977878%; --time:2.604790742548253s; --delay:-2.69361250841681s;"></div>
<div class="bubble" style="--size:2.9889355505234088rem; --distance:9.52103067720833rem; --position:91.80461850384238%; --time:3.910159577218631s; --delay:-3.2778286247252613s;"></div>
<div class="bubble" style="--size:5.562507009248699rem; --distance:9.301098147021005rem; --position:74.72510830934753%; --time:2.437869149041402s; --delay:-3.1709337424534474s;"></div>
<div class="bubble" style="--size:4.29086124792315rem; --distance:7.187737605532429rem; --position:48.31237552704254%; --time:2.4445600593105583s; --delay:-3.509087210390876s;"></div>
<div class="bubble" style="--size:2.4537777393438773rem; --distance:6.5400462126346826rem; --position:68.93454234556891%; --time:2.4796020275793014s; --delay:-3.4813447417099987s;"></div>
<div class="bubble" style="--size:4.367921396067096rem; --distance:7.053078847857351rem; --position:73.96799953187396%; --time:3.216940460934211s; --delay:-3.5959816952338515s;"></div>
<div class="bubble" style="--size:3.3332548194572196rem; --distance:8.198383371689044rem; --position:92.75520743068397%; --time:2.5315933630113485s; --delay:-2.0167569272989954s;"></div>
<div class="bubble" style="--size:5.7319620418567rem; --distance:8.821216271170467rem; --position:100.12939991829747%; --time:3.412005413877838s; --delay:-3.8318332828898143s;"></div>
<div class="bubble" style="--size:5.286575102378406rem; --distance:8.56280594350856rem; --position:14.78666281357016%; --time:3.631349886628814s; --delay:-2.5223049484412474s;"></div>
<div class="bubble" style="--size:5.151369265707683rem; --distance:6.129366642192658rem; --position:34.753366429228464%; --time:3.8790434936801574s; --delay:-2.0721394170382297s;"></div>
<div class="bubble" style="--size:4.671476519249338rem; --distance:7.548283936149392rem; --position:52.930803781291644%; --time:2.009604905731096s; --delay:-3.4706206878969796s;"></div>
<div class="bubble" style="--size:5.035243271433669rem; --distance:6.397063447318126rem; --position:82.70301222437303%; --time:2.0454380071101324s; --delay:-3.454798329612537s;"></div>
<div class="bubble" style="--size:5.997678876385922rem; --distance:8.735139330642014rem; --position:69.53663217832329%; --time:2.512036148405794s; --delay:-3.7910001368836532s;"></div>
<div class="bubble" style="--size:4.26413450450396rem; --distance:9.179805633330027rem; --position:100.55656970894657%; --time:2.6328295312480607s; --delay:-3.6335672044107405s;"></div>
<div class="bubble" style="--size:5.9842359999151125rem; --distance:9.284092422192888rem; --position:63.581651095847064%; --time:2.5731318042722706s; --delay:-2.0796770723150306s;"></div>
<div class="bubble" style="--size:4.536286773597503rem; --distance:8.343444462130382rem; --position:6.884412635296023%; --time:3.6384504734688177s; --delay:-2.8676025021041847s;"></div>
<div class="bubble" style="--size:3.800133611076352rem; --distance:8.558620810454318rem; --position:-0.19785589397777414%; --time:2.6981990204211477s; --delay:-3.917075789595489s;"></div>
<div class="bubble" style="--size:3.2285146166360983rem; --distance:9.037765252575968rem; --position:21.03414366153125%; --time:3.2694791224862505s; --delay:-3.915078978788647s;"></div>
<div class="bubble" style="--size:5.151731787095478rem; --distance:7.500947171088602rem; --position:78.85268427356993%; --time:3.1648973335508006s; --delay:-3.083772387848882s;"></div>
<div class="bubble" style="--size:3.1954123138274317rem; --distance:6.491706299135831rem; --position:12.961305679096359%; --time:2.8534513372320394s; --delay:-2.563537848017407s;"></div>
<div class="bubble" style="--size:2.8984599646622096rem; --distance:6.203566306542541rem; --position:82.77593217910562%; --time:2.143934923385618s; --delay:-2.7224379799574514s;"></div>
<div class="bubble" style="--size:5.170490989445872rem; --distance:8.114097628485107rem; --position:36.80508962950672%; --time:2.7936984333802624s; --delay:-3.6690451665712165s;"></div>
<div class="bubble" style="--size:4.0037027300013195rem; --distance:9.83901149067675rem; --position:25.65419576767119%; --time:3.5799912147634343s; --delay:-2.2119857280342674s;"></div>
<div class="bubble" style="--size:4.524845809734122rem; --distance:7.560596870882564rem; --position:70.2463408724625%; --time:2.922678167831695s; --delay:-2.3876678725764986s;"></div>
<div class="bubble" style="--size:3.975742448062962rem; --distance:9.553151928903192rem; --position:11.21393315290248%; --time:2.212857453049465s; --delay:-3.4235051951269866s;"></div>
<div class="bubble" style="--size:3.759642060076138rem; --distance:7.958889357676542rem; --position:91.10083704034957%; --time:3.972997276527808s; --delay:-3.5725278653136936s;"></div>
<div class="bubble" style="--size:5.001875858500009rem; --distance:9.79934882092264rem; --position:-3.4945308051326918%; --time:3.232157808842332s; --delay:-2.573652468019761s;"></div>
<div class="bubble" style="--size:4.702769980070513rem; --distance:9.866051232400867rem; --position:65.40523012783602%; --time:3.1969694620971185s; --delay:-2.157465501497958s;"></div>
<div class="bubble" style="--size:4.731517858344234rem; --distance:7.773071668203353rem; --position:1.7689001030434%; --time:3.5821184406237876s; --delay:-3.7959831064825678s;"></div>
<div class="bubble" style="--size:2.4910508097194324rem; --distance:6.195721607723741rem; --position:42.397915600294276%; --time:2.5253277141223713s; --delay:-2.580578423233687s;"></div>
<div class="bubble" style="--size:2.329217486989082rem; --distance:8.368538276929392rem; --position:48.18020070872659%; --time:2.784422047619689s; --delay:-3.2105370809688925s;"></div>
<div class="bubble" style="--size:2.9852961331669388rem; --distance:9.469970633671448rem; --position:6.048013921884092%; --time:3.765597617583617s; --delay:-2.785312083361672s;"></div>
<div class="bubble" style="--size:3.399654323072707rem; --distance:8.933530104638495rem; --position:31.00881295570872%; --time:2.1417705959990725s; --delay:-3.382912621758969s;"></div>
<div class="bubble" style="--size:3.4714498464792403rem; --distance:6.248109282562335rem; --position:74.48911788501614%; --time:2.43379008825688s; --delay:-2.5572874026154713s;"></div>
<div class="bubble" style="--size:2.442219459671497rem; --distance:6.946018888759569rem; --position:38.66502878620326%; --time:3.6014210189977116s; --delay:-2.958924967663968s;"></div>
<div class="bubble" style="--size:2.0218051506693326rem; --distance:7.272432883655581rem; --position:101.3483467090545%; --time:3.191958485628336s; --delay:-2.2445145699822215s;"></div>
<div class="bubble" style="--size:4.137870816608353rem; --distance:9.632724523314376rem; --position:18.97806972827577%; --time:2.9629837618572137s; --delay:-3.80791155612401s;"></div>
<div class="bubble" style="--size:4.28170683640639rem; --distance:6.8730994510569685rem; --position:1.4689509200422224%; --time:2.036442574364455s; --delay:-3.3232375709192143s;"></div>
<div class="bubble" style="--size:3.0514502203976743rem; --distance:9.716160788672298rem; --position:64.48808032433519%; --time:2.0316768367190803s; --delay:-2.042587430018373s;"></div>
<div class="bubble" style="--size:4.040754087078608rem; --distance:9.43147247369993rem; --position:79.32408184475761%; --time:3.9837913236667593s; --delay:-2.0648451313567517s;"></div>
<div class="bubble" style="--size:4.221988431334111rem; --distance:6.535110302783629rem; --position:37.22931726515126%; --time:2.009658874263244s; --delay:-2.7734913830427192s;"></div>
<div class="bubble" style="--size:2.131166179376672rem; --distance:9.140685383958331rem; --position:20.71407171741609%; --time:2.950855146521956s; --delay:-3.7133797641809134s;"></div>
<div class="bubble" style="--size:3.7168854754762313rem; --distance:8.137848016599934rem; --position:91.15738574787562%; --time:3.0751022980786336s; --delay:-3.124351227418507s;"></div>
<div class="bubble" style="--size:2.9545370254304366rem; --distance:7.0856990656016405rem; --position:39.24539603451809%; --time:3.6541690679708254s; --delay:-3.730885126448521s;"></div>
<div class="bubble" style="--size:4.162160155126908rem; --distance:6.914044172930984rem; --position:9.47688848937138%; --time:2.2025232334959797s; --delay:-2.598435272247171s;"></div>
<div class="bubble" style="--size:4.459907904462108rem; --distance:8.797196572555873rem; --position:61.75141428224893%; --time:2.545842272703332s; --delay:-2.9788350200304823s;"></div>
<div class="bubble" style="--size:5.899289967679246rem; --distance:7.038030994421975rem; --position:70.26289807968433%; --time:3.529778047031633s; --delay:-3.219851956483322s;"></div>
<div class="bubble" style="--size:3.154673140596806rem; --distance:9.92695006461501rem; --position:38.798461262654904%; --time:3.2199065709459758s; --delay:-2.040884730349668s;"></div>
<div class="bubble" style="--size:2.955937691382423rem; --distance:9.51575605774704rem; --position:101.29979593865724%; --time:2.7319713344929606s; --delay:-2.323557022698036s;"></div>
<div class="bubble" style="--size:2.3788935782257896rem; --distance:8.506698402053994rem; --position:35.611355206969655%; --time:3.9723212743239107s; --delay:-3.5475915417834507s;"></div>
<div class="bubble" style="--size:2.4903159830953285rem; --distance:8.567641968158533rem; --position:0.7134709854084402%; --time:3.027560273740296s; --delay:-2.5927619385301446s;"></div>
<div class="bubble" style="--size:4.737906171716337rem; --distance:6.705583948281814rem; --position:20.61935302390031%; --time:2.2035963653788095s; --delay:-2.0125212967783153s;"></div>
<div class="bubble" style="--size:3.0163423318805123rem; --distance:9.180277129810001rem; --position:9.698932468347898%; --time:2.464385467394055s; --delay:-3.5795116009276735s;"></div>
<div class="bubble" style="--size:5.112615686673648rem; --distance:7.132444510946072rem; --position:37.22215913082378%; --time:2.0305843742714274s; --delay:-2.4259675361069517s;"></div>
<div class="bubble" style="--size:4.233361593471875rem; --distance:8.610916673092161rem; --position:77.63937716418702%; --time:2.0783115451209344s; --delay:-2.744892736015871s;"></div>
<div class="bubble" style="--size:3.8218775424699922rem; --distance:8.545465248010814rem; --position:104.6301099962847%; --time:2.112312394816985s; --delay:-3.4008603711153684s;"></div>
<div class="bubble" style="--size:3.162637217493268rem; --distance:9.921718604592055rem; --position:61.757806398067146%; --time:3.2497725471361796s; --delay:-3.0556280641111164s;"></div>
<div class="bubble" style="--size:5.049933755743184rem; --distance:7.7217713186795764rem; --position:53.10845710531163%; --time:2.4529273071803885s; --delay:-3.1646728923885346s;"></div>
<div class="bubble" style="--size:2.5554697800035546rem; --distance:6.557021419042687rem; --position:14.032268413387555%; --time:2.5133095517269064s; --delay:-2.40191587671496s;"></div>
<div class="bubble" style="--size:5.18891751547091rem; --distance:6.108133780865208rem; --position:23.540984234869853%; --time:3.339058145771466s; --delay:-2.2812854769115343s;"></div>
<div class="bubble" style="--size:3.1863182867786133rem; --distance:8.230588855544118rem; --position:13.583472048845692%; --time:2.3866831255172904s; --delay:-3.856934063083517s;"></div>
<div class="bubble" style="--size:2.2412237296706854rem; --distance:9.075007509532366rem; --position:64.28127953554444%; --time:3.6904768325105577s; --delay:-2.8785290803592307s;"></div>
<div class="bubble" style="--size:5.370168446815498rem; --distance:6.686297677802376rem; --position:42.82684364265049%; --time:2.6952801014877292s; --delay:-2.184475690287635s;"></div>
<div class="bubble" style="--size:2.513888566767408rem; --distance:8.816995388295883rem; --position:51.37397052521257%; --time:2.744894601534247s; --delay:-3.456078147553968s;"></div>
<div class="bubble" style="--size:2.4549045416435247rem; --distance:8.079732958983435rem; --position:86.08210952915222%; --time:3.4645137615381754s; --delay:-2.251984664053505s;"></div>
<div class="bubble" style="--size:4.2570462436931615rem; --distance:6.791456465762955rem; --position:2.116092042723756%; --time:3.5370714427782945s; --delay:-2.6897281524435868s;"></div>
<div class="bubble" style="--size:3.537400243013032rem; --distance:9.67100420754577rem; --position:17.689786068693426%; --time:2.7123328494572654s; --delay:-2.610920460723773s;"></div>
<div class="bubble" style="--size:4.003658572480361rem; --distance:9.021589784712214rem; --position:34.886404596863315%; --time:3.900699480409261s; --delay:-3.502947673177115s;"></div>
<div class="bubble" style="--size:4.384940943741155rem; --distance:6.655503483850258rem; --position:42.9505557690309%; --time:3.21131464597303s; --delay:-3.4584921134953523s;"></div>
<div class="bubble" style="--size:4.028494656910385rem; --distance:9.321911781845632rem; --position:9.028434833461008%; --time:2.078192914893054s; --delay:-3.5606578287037767s;"></div>
<div class="bubble" style="--size:5.0720682318586165rem; --distance:6.017598633648538rem; --position:71.47221207120434%; --time:3.8612361838029594s; --delay:-3.640927923661345s;"></div>
<div class="bubble" style="--size:3.5018531608753616rem; --distance:9.84287323038945rem; --position:92.94298896256397%; --time:3.4011484732394885s; --delay:-2.2963102956023986s;"></div>
<div class="bubble" style="--size:5.585711694858562rem; --distance:6.954516883063647rem; --position:53.661671254254095%; --time:3.3198385512346467s; --delay:-3.208871061716081s;"></div>
<div class="bubble" style="--size:3.0903465589805315rem; --distance:8.416742931818156rem; --position:103.01162190091183%; --time:3.5973045057653414s; --delay:-2.41301036250196s;"></div>
<div class="bubble" style="--size:3.2220433775543826rem; --distance:9.630996023380792rem; --position:25.930050250115254%; --time:2.9960705795341567s; --delay:-2.2395565865350084s;"></div>
<div class="bubble" style="--size:2.4145514878820773rem; --distance:6.676437466252848rem; --position:97.07573350177594%; --time:2.2814874376771495s; --delay:-3.447985277390818s;"></div>
<div class="bubble" style="--size:5.430516374978002rem; --distance:9.769252098873837rem; --position:67.9296381843734%; --time:3.0000123609825375s; --delay:-2.321578980029987s;"></div>
<div class="bubble" style="--size:2.7520821561024063rem; --distance:7.540818921460166rem; --position:53.84067103911186%; --time:2.491745669965979s; --delay:-2.7192189489094396s;"></div>
<div class="bubble" style="--size:2.0480620300921775rem; --distance:8.37143792370361rem; --position:87.02079162443167%; --time:2.11953790358108s; --delay:-3.15282995525499s;"></div>
<div class="bubble" style="--size:3.1965207165444527rem; --distance:9.361778274609001rem; --position:98.9992243567883%; --time:3.1023787634515716s; --delay:-2.8410546972516784s;"></div>
<div class="bubble" style="--size:2.713942429140663rem; --distance:8.46811335512868rem; --position:44.79921508552692%; --time:3.6826882897394926s; --delay:-2.2516053958822018s;"></div>
<div class="bubble" style="--size:5.487365321069164rem; --distance:9.501990853143207rem; --position:81.35726052835821%; --time:2.2295094036746814s; --delay:-2.6248792655783926s;"></div>
<div class="bubble" style="--size:3.699712869395923rem; --distance:9.637740514974194rem; --position:28.400636847149336%; --time:3.0127812392024835s; --delay:-3.8339722516477837s;"></div>
<div class="bubble" style="--size:4.459042054583246rem; --distance:8.777834784409489rem; --position:7.583874634948071%; --time:2.6276445359390594s; --delay:-3.1547696281368576s;"></div>
<div class="bubble" style="--size:2.945341585391427rem; --distance:9.270929094591027rem; --position:40.62695007638445%; --time:3.205071003433802s; --delay:-2.1994247227802175s;"></div>
<div class="bubble" style="--size:3.553177775571201rem; --distance:6.807432311217608rem; --position:17.79569551135902%; --time:2.4179907321268015s; --delay:-2.9237905654126455s;"></div>
<div class="bubble" style="--size:2.718301978478552rem; --distance:9.052744196076016rem; --position:66.9903494594351%; --time:3.4978308336084507s; --delay:-2.534780826659239s;"></div>
<div class="bubble" style="--size:2.1554131251281516rem; --distance:8.165054692083574rem; --position:88.6795244711277%; --time:3.418914531394343s; --delay:-2.0973626113705612s;"></div>
<div class="bubble" style="--size:3.8169435516468972rem; --distance:9.154844138468611rem; --position:75.82797178563219%; --time:2.1768218011748592s; --delay:-3.5790499156858764s;"></div>
<div class="bubble" style="--size:3.958266559813784rem; --distance:7.474789100065036rem; --position:49.70097538682679%; --time:2.2604033951497495s; --delay:-2.689368253705335s;"></div>
<div class="bubble" style="--size:3.249441248591971rem; --distance:6.196870377887013rem; --position:52.87544667979035%; --time:2.100046998729219s; --delay:-3.0958936272402253s;"></div>
<div class="bubble" style="--size:2.461627775827945rem; --distance:8.218707137176974rem; --position:36.58647935878653%; --time:3.794665821365261s; --delay:-3.9998754211856564s;"></div>
<div class="bubble" style="--size:4.353342795404867rem; --distance:8.389487716454159rem; --position:54.43888268240869%; --time:3.9368281115901644s; --delay:-3.499350490368352s;"></div>
<div class="bubble" style="--size:5.828276509426902rem; --distance:8.157848717549092rem; --position:98.45133803026407%; --time:3.4413337136138336s; --delay:-3.2885658557658983s;"></div>
<div class="bubble" style="--size:4.4253237390269415rem; --distance:9.873975649883974rem; --position:56.284899391015365%; --time:2.236523008938151s; --delay:-2.5267941537739893s;"></div>
<div class="bubble" style="--size:4.287112145304333rem; --distance:8.114465756217722rem; --position:51.112215918836235%; --time:3.0159760786274417s; --delay:-2.09768916304242s;"></div>
<div class="bubble" style="--size:4.352911517233462rem; --distance:7.440429579879393rem; --position:82.66122018012742%; --time:3.110053567432226s; --delay:-3.271343440456048s;"></div>
<div class="bubble" style="--size:2.8403435226463127rem; --distance:9.727599371020196rem; --position:92.35017238312582%; --time:2.2022321429001663s; --delay:-2.371436794195805s;"></div>
<div class="bubble" style="--size:3.994364399071462rem; --distance:7.687361828670056rem; --position:18.32973297183203%; --time:3.1180374200235583s; --delay:-2.288600591594194s;"></div>
<div class="bubble" style="--size:2.251388899964242rem; --distance:7.679715811088968rem; --position:25.25836666072764%; --time:2.5962522940062183s; --delay:-3.3061255636476816s;"></div>
<div class="bubble" style="--size:5.586383370637863rem; --distance:8.397495202436392rem; --position:25.830854826543295%; --time:3.992585690450522s; --delay:-2.8055057226153197s;"></div>
<div class="bubble" style="--size:5.035728146080639rem; --distance:8.247372706473236rem; --position:84.40221759066922%; --time:2.037774170811247s; --delay:-3.851464323908169s;"></div>
<div class="bubble" style="--size:5.641276838518789rem; --distance:7.724386892588836rem; --position:38.34473822662125%; --time:3.4671329720562936s; --delay:-2.915409246486153s;"></div>
<div class="bubble" style="--size:5.142045512679127rem; --distance:7.729493056505669rem; --position:18.127116314388854%; --time:3.5382036264100236s; --delay:-3.8984184300587215s;"></div>
<div class="bubble" style="--size:2.608137162337475rem; --distance:8.902977194395675rem; --position:80.67440485056575%; --time:3.45595378145547s; --delay:-2.2155917646861845s;"></div>
<div class="bubble" style="--size:4.781568564018798rem; --distance:7.4006418888017125rem; --position:10.751123304501073%; --time:3.3697504572333417s; --delay:-2.421014009131974s;"></div>
<div class="bubble" style="--size:4.2521691519356635rem; --distance:9.824413927294785rem; --position:16.736175674452443%; --time:3.3180068571861048s; --delay:-3.0059526216981207s;"></div>
</div>
<div class="content">
<div>
<div><b>Eldew</b><a href="#">Secuce</a><a href="#">Drupand</a><a href="#">Oceash</a><a href="#">Ugefe</a><a href="#">Babed</a></div>
<div><b>Spotha</b><a href="#">Miskasa</a><a href="#">Agithe</a><a href="#">Scesha</a><a href="#">Lulle</a></div>
<div><b>Chashakib</b><a href="#">Chogauw</a><a href="#">Phachuled</a><a href="#">Tiebeft</a><a href="#">Ocid</a><a href="#">Izom</a><a href="#">Ort</a></div>
<div><b>Athod</b><a href="#">Pamuz</a><a href="#">Vapert</a><a href="#">Neesk</a><a href="#">Omemanen</a></div>
</div>
<div><a class="image" href="https://codepen.io/z-" target="_blank" style="background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/happy.svg")"></a>
<p>©2019 Not Really</p>
</div>
</div>
</div>
<svg style="position:fixed; top:100vh">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>
<feComposite in="SourceGraphic" in2="blob" operator="atop"></feComposite>
</filter>
</defs>
</svg>
CSS
body {
display: grid;
grid-template-rows: 1fr auto;
grid-template-areas: "main" "footer";
overflow-x: hidden;
background: #F5F7FA;
min-height: 100vh;
font-family: "Open Sans", sans-serif;
}
body .footer {
z-index: 1;
--footer-background:#ED5565;
display: grid;
position: relative;
grid-area: footer;
min-height: 12rem;
}
body .footer .bubbles {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1rem;
background: var(--footer-background);
filter: url("#blob");
}
body .footer .bubbles .bubble {
position: absolute;
left: var(--position, 50%);
background: var(--footer-background);
border-radius: 100%;
-webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
transform: translate(-50%, 100%);
}
body .footer .content {
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 4rem;
padding: 2rem;
background: var(--footer-background);
}
body .footer .content a, body .footer .content p {
color: #F5F7FA;
text-decoration: none;
}
body .footer .content b {
color: white;
}
body .footer .content p {
margin: 0;
font-size: 0.75rem;
}
body .footer .content > div {
display: flex;
flex-direction: column;
justify-content: center;
}
body .footer .content > div > div {
margin: 0.25rem 0;
}
body .footer .content > div > div > * {
margin-right: 0.5rem;
}
body .footer .content > div .image {
align-self: center;
width: 4rem;
height: 4rem;
margin: 0.25rem 0;
background-size: cover;
background-position: center;
}
@-webkit-keyframes bubble-size {
0%, 75% {
width: var(--size, 4rem);
height: var(--size, 4rem);
}
100% {
width: 0rem;
height: 0rem;
}
}
@keyframes bubble-size {
0%, 75% {
width: var(--size, 4rem);
height: var(--size, 4rem);
}
100% {
width: 0rem;
height: 0rem;
}
}
@-webkit-keyframes bubble-move {
0% {
bottom: -4rem;
}
100% {
bottom: var(--distance, 10rem);
}
}
@keyframes bubble-move {
0% {
bottom: -4rem;
}
100% {
bottom: var(--distance, 10rem);
}
}
External Link for CSS Goey footer red blotched gloopy footer animation
Add Comment
Other Items in footers
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript