Code Details
CSS CARD ANIMATION
Css rectangular card animation (use html and css)
Web Development
css card animation
css
animation
<div class="card">
<h2>Aj Designer </h2>
</div>
.card {
width: 190px;
height: 254px;
background: #07182E;
position: relative;
display: flex;
place-content: center;
place-items: center;
overflow: hidden;
border-radius: 20px;
}
.card h2 {
z-index: 1;
color: white;
font-size: 2em;
}
.card::before {
content: '';
position: absolute;
width: 100px;
background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
height: 130%;
animation: rotBGimg 3s linear infinite;
transition: all 0.2s linear;
}
.card::after {
content: '';
position: absolute;
background: #07182E;
inset: 5px;
border-radius: 15px;
}
@keyframes rotBGimg {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
None
Aj Designer