Border Animation with the help of CSS3
CSS3 Tutorial : Border Animation
In this tutorial we are going to post a good animation with the help of CSS3.
Demo is given below
CSS Code for making such Animated Border
<style>
.card {
margin:auto;
width: 300px;
height: 360px;
background-color: #030029;
position: relative;
border-radius: 8px;
display: grid;
place-items: center;
overflow: hidden;
}
.card h2 {
font-family: system-ui;
font-size: 2rem;
color: #ffa3fd;
text-transform: uppercase;
text-align: center;
z-index: 2;
}
.card::before {
content:"";
position: absolute;
width: 150px;
height: 140%;
background-image: linear-gradient(
180deg,
#865dff,
#e384ff
);
animation: rotate 3s linear infinite;
}
.card::after {
content:"";
position: absolute;
inset: 8px;
background-color: #030029;
border-radius: inherit;
}
@keyframes rotate {
100% {
rotate: 360deg;
}
}
</style>
Here main key animation is rotate for 360 deg.
And HTML code to display this animation.
<div class="card">
<h2>Border Animation</h2>
</div>
That’s it.
Do you like more CSS Tutorial ?
