48 lines
1.1 KiB
CSS
48 lines
1.1 KiB
CSS
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
div.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background:
|
|
linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%) 0 0/100% 200%;
|
|
animation: rainbow 6s linear infinite;
|
|
}
|
|
|
|
video {
|
|
display: flex;
|
|
margin: 200px;
|
|
max-width: 1920px;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 24px;
|
|
transform: scale(0.9) rotate(0deg);
|
|
box-shadow: 12px 12px 12px 12px rgba(0, 0, 0, 0.5);
|
|
animation: 3s ease-in-out 1s alternate infinite scale;
|
|
}
|
|
|
|
@keyframes scale {
|
|
from {
|
|
transform: scale(0.9) rotate(0deg);
|
|
box-shadow: 12px 12px 12px 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
to {
|
|
transform: scale(1) rotate(1deg);
|
|
box-shadow: 48px 48px 48px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
to {
|
|
background-position: 0 -200%
|
|
}
|
|
}
|