Animated Borders

How to import code

The best bag for women this year

Great design from designers
Best Leather quality and materials
Extra Low price
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

Download this block

Many people think that there is some kind of animated borders for blocks. But CSS doesn’t have such a solution now and when you see animated borders, in reality, it’s not borders. The idea in this effect is to place the parent container, and add there equal small padding. For example, this will be 3px. Now, put the child container, and set the z-index for it as 2 (or anything above), this will be our content container. Now, put another container and add a background to it, usually, it’s a gradient background, because simple color has no sense. Now, set it to be absolute position and top, left, right, and bottom values as negative, for example, -60%. Set z-index as 1 (must be lower than content)

Now, the only thing you need is to add rotation in this background container and set Overflow hidden in the Spacing option in the parent container.

So, users will see only the part that you set as padding in the parent container. See the effect without my content. For rotation animation, easiest way is to use Greenshift Infinite transformation option.

By the way, different gradients and size of container with backgrounds will give you a different look. Here, for example conic background, which gives effect as running border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel justo ante. Nulla ullamcorper vehicula ipsum.

«
»