border animation

				
					:root{
    --first-color: #FF0000;
    --second-color:#00FF00;
    --size: 100px;
    --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 Comment

Your email address will not be published. Required fields are marked *