60 lines
1.4 KiB
CSS
60 lines
1.4 KiB
CSS
#flutter_target {
|
|
border: 1px solid #aaa;
|
|
width: 80vw;
|
|
height: 60vh;
|
|
border-radius: 0px;
|
|
transition: all 150ms ease-in;
|
|
align-self: center;
|
|
}
|
|
#flutter_target.resize {
|
|
width: 480px;
|
|
height: 320px;
|
|
}
|
|
#flutter_target.spin {
|
|
animation: spin 6400ms ease-in-out infinite;
|
|
}
|
|
#flutter_target.shadow {
|
|
position: relative;
|
|
}
|
|
#flutter_target.shadow::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
top: calc(100% - 1px);
|
|
left: 0;
|
|
height: 1px;
|
|
background-color: black;
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
transform: rotateX(80deg);
|
|
box-shadow: 0px 0px 60px 38px rgb(0 0 0 / 25%);
|
|
}
|
|
#flutter_target.mirror {
|
|
-webkit-box-reflect: below 0px
|
|
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: perspective(1000px) rotateY(0deg);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
15% {
|
|
transform: perspective(1000px) rotateY(165deg);
|
|
animation-timing-function: linear;
|
|
}
|
|
75% {
|
|
transform: perspective(1000px) rotateY(195deg);
|
|
animation-timing-function: linear;
|
|
}
|
|
90% {
|
|
transform: perspective(1000px) rotateY(359deg);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
100% {
|
|
transform: perspective(1000px) rotateY(359deg);
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|