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);
}
}
