Cool Animated Border Effects for Columns

Elementor

Written by :

Posted on :

Tags :

animation, css, effects

Share :

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

What This CSS Code Does:

Found this awesome effect from Jim Fahad Digital. This will create an animated border for columns. 

Required Plugins:

Elements Used:

How To Implement:

The CSS Code:

				
					:root{
    --first-color: #0AEEF4;
    --second-color: #DF017D;
    --size: 150px;
    --speed: 4s;
}
selector{
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
selector:before{
    content: '';
    position: absolute;
    width: var(--size);
    height: 140%;
    background: linear-gradient(var(--first-color), var(--second-color));
    animation: animate var(--speed) linear infinite;
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
				
			

Leave a Reply

Your email address will not be published.

Thanks for stopping by! Here's something totally awesome to brighten up your day!
READY FOR A TOTALLY AWESOME WEBSITE?