CSS Reflections

Adding this CSS Code:

Code:

---

.reflect {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

---

and adding htmlclass="reflect" to your text, images or objects will add a fading reflection under your shape.

The reflection itself cannot be animated, only its parent.
I added an anime.js function to try that out.

The only downside is Firefox has not implemented this webkit feature.
In that case, you would need to clone, reflect and fade everything directly.

Attachment 134134

Acorn

I am not seeing any reflections but the pink and green animated thingy at the bottom is awesome.

Quote:

---

Originally Posted by gwpriester

I am not seeing any reflections but the pink and green animated thingy at the bottom is awesome.

---

gary, I've checked across my browsers and FF is the only fail.

In Website Body Code, you can change rotate: anime.stagger([-360, -180]), to any +/- values you like to get different effects. 360 is a full turn.

Acorn

I can see the reflections in Chrome & Edge but as you state not in FF.