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

Related Code Snippets

Modern Registration From

Modern Login and Signup Page

Web Development View Code
Animated Navigation Bar

Animation Navigation bar in html and css.

Web Development View Code
Animation Login Form

Animation Login Form

Web Development View Code