CARD
body {
background-color: black;
width: 99vw;
height: 95vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 190px;
height: 254px;
background: #07182E;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
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: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 183, 255)), to(rgb(255, 48, 255)));
background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
height: 130%;
-webkit-animation: rotBGimg 3s linear infinite;
animation: rotBGimg 3s linear infinite;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
@-webkit-keyframes rotBGimg {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotBGimg {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.card::after {
content: '';
position: absolute;
background: #07182E;
;
inset: 5px;
border-radius: 15px;
}