72 lines
1.4 KiB
CSS
72 lines
1.4 KiB
CSS
@keyframes pop {
|
|
0% {
|
|
scale: 0;
|
|
}
|
|
80% {
|
|
scale: 2.2;
|
|
}
|
|
100% {
|
|
scale: 2;
|
|
}
|
|
}
|
|
@keyframes scroll {
|
|
from {
|
|
width: 70px;
|
|
}
|
|
to {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
@keyframes appeartext {
|
|
from {
|
|
font-size: 0pt;
|
|
}
|
|
to {
|
|
font-size: 12pt;
|
|
}
|
|
}
|
|
.Alert {
|
|
margin: auto;
|
|
min-height: calc( 12pt + 20px );
|
|
background-color: rgb(181, 136, 255);
|
|
border: #000 0px solid;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
color: black;
|
|
margin-top: -20px;
|
|
font-size: 12pt;
|
|
font-family: 'Manrope';
|
|
animation-name: scroll;
|
|
animation-duration: 2s;
|
|
animation-delay: .6s;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease;
|
|
width: 70px;
|
|
min-width: 70px;
|
|
display: block;
|
|
/* mix-blend-mode: luminosity; */
|
|
scale: 1;
|
|
-webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.15);
|
|
box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.15);
|
|
min-height:61px;
|
|
}
|
|
.Alert>i {
|
|
animation-name: pop;
|
|
animation-duration: .5s;
|
|
animation-delay: .4s;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease;
|
|
scale: 0;
|
|
font-size: 12pt;
|
|
mix-blend-mode: normal;
|
|
}
|
|
.Alert>span {
|
|
animation-name: appeartext;
|
|
animation-duration: .8s;
|
|
animation-delay: 1s;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease;
|
|
font-size: 0pt;
|
|
mix-blend-mode: normal;
|
|
} |