Day # 27: Moving Triangles

I decided to create a cool animation for today’s website by playing around a little bit with a setting for the linear-gradient value I found in a blog after doing some research on cool animation effects. The key here is to include a couple of linear-gradient, one with a smaller angle at the beginning and the other one with a bigger angle in the end.

The selected color needs to get darker from one linear-gradient to the other. That way the lines get a rather interesting effect that adds sophistication to the animation:

    background: linear-gradient(45deg, #00f376 10%, transparent 10%,

    transparent 50%, #00f376 50%, #00f376 60%, transparent 60%,

    transparent 100%), linear-gradient(135deg, #00f37666 10%, transparent 10%,

    transparent 50%, #00f37666 50%, #00f37666 60%, transparent 60%,

    transparent 100%);

    background-size: 40px 40px;

    filter: hue-rotate(calc(var(--i) * 90deg));

    transform: rotate(calc(var(--i) * 90deg));

Lastly, we could add a smooth reflection effect on the bottom by setting the property of webkit-box-reflect, like so:

    -webkit-box-reflect: below 2px linear-gradient(transparent, #0004);