Border Animation 1
Border Animation
HTML
<div class="AnimatedBorder">
<p>Border Animation</p>
</div>
CSS
* {
box-sizing: border-box;
}
.AnimatedBorder {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 275px;
height: 275px;
background: #222;
border-radius: 30px;
overflow: hidden;
}
.AnimatedBorder::before {
position: absolute;
content: '';
width: 150%;
height: 150%;
/* Color Gradient */
background: conic-gradient(#cbf802 30deg, #ff6200 50deg, transparent 100deg);
animation: animate 4s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
.AnimatedBorder::after {
position: absolute;
display: flex;
content: '';
width: 265px;
height: 265px;
background: #201f1f;
border-radius: 30px;
}
.AnimatedBorder p {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
z-index: 3;
font-family: verdana;
font-size: 25px;
color: #fff;
}