From 140f225300f61e56327f2a4de260cabde2ad645d Mon Sep 17 00:00:00 2001 From: invigorzz313 Date: Thu, 10 Aug 2023 21:03:50 +0530 Subject: [PATCH] glass fill animation --- Animations-CSS/Glass fill animation/ReadMe.md | 3 + .../Glass fill animation/index.html | 13 +++++ Animations-CSS/Glass fill animation/style.css | 55 ++++++++++++++++++ .../Glass fill animation/waterWave.jpg | Bin 0 -> 9788 bytes 4 files changed, 71 insertions(+) create mode 100644 Animations-CSS/Glass fill animation/ReadMe.md create mode 100644 Animations-CSS/Glass fill animation/index.html create mode 100644 Animations-CSS/Glass fill animation/style.css create mode 100644 Animations-CSS/Glass fill animation/waterWave.jpg diff --git a/Animations-CSS/Glass fill animation/ReadMe.md b/Animations-CSS/Glass fill animation/ReadMe.md new file mode 100644 index 0000000000..70f973e804 --- /dev/null +++ b/Animations-CSS/Glass fill animation/ReadMe.md @@ -0,0 +1,3 @@ +# Glass fill animation + +This is an animation of a glass filling with water using CSS. \ No newline at end of file diff --git a/Animations-CSS/Glass fill animation/index.html b/Animations-CSS/Glass fill animation/index.html new file mode 100644 index 0000000000..cab94d673a --- /dev/null +++ b/Animations-CSS/Glass fill animation/index.html @@ -0,0 +1,13 @@ + + + + + + + Glass fill animation + + + +
+ + \ No newline at end of file diff --git a/Animations-CSS/Glass fill animation/style.css b/Animations-CSS/Glass fill animation/style.css new file mode 100644 index 0000000000..b591149ffe --- /dev/null +++ b/Animations-CSS/Glass fill animation/style.css @@ -0,0 +1,55 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + justify-content: center; + align-items: center; + min-height: 100vh; + display: flex; + background-color: black; +} + +.glass { + position: absolute; + top: 50%; + left: 50%; + width: 150px; + height: 180px; + border: 5px solid black; + border-radius: 20px; + border-top: 2px solid transparent; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + transform: translate(-50%,-50%); + background: url(waterWave.jpg); + color: #ffffff; + font-size: 130px; + background-repeat: repeat-x; + animation: filling 5s linear infinite; + box-shadow: 0 0 0 6px #ffffff; +} + +@keyframes filling { + 0%{ + background-position: 0 100px; + } + + 10%{ + background-position: 0 100px; + } + + 40%{ + background-position: 1000px -70px; + } + + 80%{ + background-position: 2000px -80px; + } + + 100%{ + background-position: 2500px 100px; + } +} \ No newline at end of file diff --git a/Animations-CSS/Glass fill animation/waterWave.jpg b/Animations-CSS/Glass fill animation/waterWave.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1d887e0a30483a48a15146aa9163269620869400 GIT binary patch literal 9788 zcmeHMcUV)~vfpX+5{d{45&|MUA%OH=1ERF60=AHBLLdo{gsN!3hLs{Hq9DZrB1jWO z6h#E3DP06bKm{8|4k9*$yAzb7=iT#t?|tw7$^MePXRS3eYt3(F&0dqt_00_dXjdnq z699uQ9heRP%nbtxj?uJ003Z^z03iSX;D7`S4y=VJb?BRs00#u1CkOiSE^m;8i3G`< zP!@(pr$?|kEE0zn%GALyLMb4NiDA%~GzN)|38a%a7z)UyQJEMvCx#B{Vb+mB64Z!c z1ccIcFi|89$XZWhaY&@OVN_fYhZAOo!!g-{=gkYzWzug0;31v4}Q{W`r?7 z4ha*@pflNK(Uw@gax;kLb>pyBBEl9dN}!pSgVPTlsAY-$v6!f+D7`2Hy-*evr*CR% zio+9d1cENaq05e8a!Ap-Otvad#k>v&kWFUM!gy$4csfY|p%ENQEcS=uu%J**C_5-L zY(f2Rwk{0wE&eG)4C9auAtUTVS>S>kGzXc#C^mkM)@F+>K5 z3bLJvPCg4-Agy{--WcRAXp9dyl@`ePZGH-Qfj=yQMd!~-A>%+g$N-rfHpHtBO*M~h z7!(Z)+>mV%Y>?N*m!VSvanOW6bpH_G+2I%sLG%Oe|7aJ)fFt1XCc1cnF2QtRGDw*h zjT*%HZN~o@IV?U8Bt;>c{p6pIIV@%YaWi`sNTEUN;6sI(#|lUD=7f?%_)J*L-#|38 zWwSvJ(ZLdHXrgb3*EcpW;i2$jNoE_s0B;Ty-aL%vtz$!>&5I@)dqF85a5_jO(Q$Md z8Dz3ST@sZA@`bD;IE<|fXi*UiODOtCOd468#0WFzb+bbwSY*(W8X8KagA2W6XqW`; zHA^0dkf*R1DE=X%$t;ir?Nuv&lzW5W^8}q{HIIS?ju)v=bDrQc;C>Z@XlN7vjO%%6 zTRP{b8lET3=p-i95*w{c0Ru@9bPm?)zndfewnqN!yfyy1E)fe}sF|(d1Nk4!SF8D96HCDW6{3n0$!(qW+RK|k)b^re^v%vjk18*sRGkxAY zzj5)i58sKuq#s^Z;Vx$K_Ni_5g{QVQ4tYQ33;@H zxVVJU5;-Y(RppgxSY@n=y0$S+UDHrg1&g=UH#9Z3va(vK=RmZ#a51*DGUq9QiHM3y zh)XD<(Te68SPk?4^EGz|kP?DZ;1mQ*3V=(&5K^$YyTCF41|Xn!Dj&1?8v==f!3Cf( z1*jVu`(+4#!J*N)en1QX1K?-`8USEliwVDSEYgbzEF!Roz&|1Y6E8GkLZd2I)QfKe z0CM%&o@-EZUw7tJ=z;D(wtfiewGVFd=K?^uR2z5*dir!JuFW>D9xrQq)XfECBkGr5 zIOZmCWRn>Y01T?enqIx=8GF-t?<@c)_)m_$e+cpI(!C8xsH*0t9=$fsj@&xYVXSkvn^1Hk%P-vN@_CSmE`{%FqAhoRvXD0jkxf$Z}c zsjJRSmA$GtK6tD?vGBZa&4=DvheNWp*-EQFJSu$sQugCL17z|64Mvb{&I1-^ecvQ1nu>ekU| z?F*8p-+g#~#YGJelv49A)9=p#0IX}Db8spENUfx+UV$t{rf0jFUiJcj1WIwWzT%@o z0C4vHqw0hHNC zjEcTgDRiC_g2rGd_$;Ndee)Z2Zp8)-)|>P31|Ej;e#bkQMb|I-qw>!^maUEggYLge zkBAt3mnl50y6S^l`7X0n+R&YP|8%CMvgQ}d$&$vdlr}HDx+YK8Pu+=5D>nL&-D^dg@w=1rCREY;GmONVPV~f3@LTdH z)B*d}0te?fE1MRrgqLTwIJtegaN`Y&5Z5&rVJf*n<-v!W)~i%k#SCVCG*!@Po_bVx zzlpNpe90S@!I$7U00K)5Ivm3gNCb59{SiXYnHRw8OG#rq(JHofUZvrDyr6@zHEfpB zI?SeD6Lj0&I9^qs5IL|xj3d`mAJD705#Q|>1D^vb*VeW<>pgR7O?~|;`smgpfy7!| z;^^mI%88NBM>oeUC%9eCwRwGzXdi1@x;DFwsQ%twR#?!JhzUV*jSMH3o(s6(=`vh> z(#LzvS`+Q`2A!eNctJ(6i<;*Ghe}!w`lgM>KUxv)1j=?Ag!w82tvSE{M$D=;U2F1X zAGBqQYU>L7OsI+RoBkGZfeN`=*~s`z+P&sL-E2{PgG6}Ny`z6XpR2}^SB)d8Ypzt+6t_J+y&mdW@oog_DlC`CC?0<{*~5!3K4egM z{X`5Z695DsG8Io-^n855=kcl|Hk6({!WcITp%)_jL6^2Fuj;C1pHDP&rIPc7%K^>a zk19S-%^uQR_j)FFmt)$6saZ=)b2+cL(X-h3`5H2#J{=J{NP4 z9?*rbP_PeN=KKP4ctW#yYzV|)^1P(>Z`~_7=QYu(!yk|H9jnO9^K2y_;<=}llL`Z>Vfb7Y>c8hi8VYHH!o>BbEx1XP`vsLocYyLU9AW= z{MA!tshqEIoMw@k`!j*j2T8l8d#J>5Hr4rQvun$Xcj4C#B(L|aKdObfy%(`6?ula~ z%vUJ_{H+s%8!bGeG-dQl+xBH^# z!3W!yn4oNuyz-taC0gaqmS|ARyt!K&2VXiiuG(a`FWK*nY_|E^QR~NRqX^q?l#sut z{XzK@v*}*U^-=TYQ%^_VX3PPgaZOw6+3KWe@9jz3Ps-~-Oi$KrKPgSvbnn~F;;m4K zX`-S01VB2`%meGC!O)ux_b%LFKnKxJm_WIt?RPZY1HTR_E^>hv!TkfCp+KHXh;iF?q_&! zchyRFeHu|fo=q}hIXN{YvtoKGlI%#sT~VgX+_)j0C+fdCO7FGvH7sZ_G^EHnz~8#~ zw)x%KE7gT8h@PGrPM(P`+923s-!7tVI$NzA>u7svVBEVx$$eRSR}}lnkXw9>|Jy3F z3BjGSP2Jmzj1uyn+`X)#mE?@fVfIupYNxzRKJNHt#r+p|=?%|GoX^*sCh_inHBV=~ zRknK2crfJ3xOuy@bA;7}`!_u|BCl^;vd4Df=6>agGe&V|LT}o*3XEE%*gV7@tn+*y zkbGJfl|)T7KVwvTij*(C#{Hp7NK?p0L@oSU$g&l!LT|nL*7pVD&$vXE^mHW!t4mu; z2A`h2P*C9Dw$k4|z9=m6cDL2BxMtV1Nh(&ORME`q_2dQFk=Peb296cOomaPJnUs&b z@I59FUpn!+cE|NzmYCPJsT>_;tx#pXe5|Y2b)WTrXgBRHAjrhk9h?JbTQ(f?R9N98 zwe`KV+-1mV{NED*-p)a%64e$ziwG%Cevfu{Npp5DL z_^L*0CT6{EvwAht^Q0lt#b%z~5DQmRzvQ1rWIZ{bBV4{TuG-&(=}%#`Z-v&pP!++}2he7O2R3=bM#xE2S#pj}bAu+Gax0 z^__9+lu7(Hlk`4Yh``8;rzsw5ADZ>MwNND?QOJdV?f6v^1X6rTZdn}$AKrnU__K6) zp-Mu}0R)Z9bizh0U1~zBVwd%oab)+YM~LoK zlJ6_?0O`Z9BKMaYg~%E~-<;0MY+GXDffw5RFmP(8?ep);BhSwiw)$vZl2pE0aSj%q z?((&6qj2s!)UEfCW9JO0%`5%86Y^0Fj|&F(0B}!iuvKZMqPb(J!OfzWz(A@(?}6Q6 zA@uh55Au6+l97d6XFN+NkAiCI9q_s=3@O6KRyvxVz@N^qx!+4xPJ(c;! z)8$mcp{5&W$jpzSnVAokuSoooWSl4V zRQO8(YiAHq5?m{r_uS+4nk2D4(@Hy)7fr*1$@*dbQngGe8>I5_Jg1h#*=rsG&y~Da zfT2ji@)SKI(R9Xl?pynuONYa8GB$aenfl6&F7*+k!0LrkoW$>)}H4+Rx26QXZkfWyncNgu8Ar%^CGE^Ef4LccP-h z(d?k=*rApquv7))4(Aif&B8~dWj7)c28@?kU~k>L>Q`sdOVm=*a1&o*E|sKR>78nm zBzjY$E2V5gVJAH?kFc_Fw@Uv|c*VUeXNgbW!=eq<;7(16-DV!g-Cdebp1a?;$M>Ag z=j!LONgAj3#c%sOlPi~IXKqMBc8(m6^}*L$-`u$*9$%kje-67>e6~NuVEyK}JvwzO zl@YHb4b_D6YJ*u46P!>8*eDswiI}kWF(x?@UYMS>@rIYS)qaPoSb5Xr#U);CF;l1J~ErdxRQ^| cL=auIhN8g7oF^r