27 lines
1.4 KiB
CSS
27 lines
1.4 KiB
CSS
|
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
|
||
|
|
html {background-color: #000;}
|
||
|
|
|
||
|
|
@keyframes backdrop { 0% {rotate: 0deg} 100% {rotate: 360deg}}
|
||
|
|
@keyframes backdrop2 { 0% {rotate: 45deg} 100% {rotate: 405deg}}
|
||
|
|
@keyframes backdrop3 { 0% {rotate: 90deg} 100% {rotate: 450deg}}
|
||
|
|
@keyframes backdrop4 { 0% {rotate: 135deg} 100% {rotate: 495deg}}
|
||
|
|
@keyframes backdropstart { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.9}}
|
||
|
|
@keyframes backdropstart2 { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.5}}
|
||
|
|
@keyframes backdropstart3 { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.8}}
|
||
|
|
@keyframes backdropstart4 { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.7}}
|
||
|
|
.backdrop, .backdrop2, .backdrop3, .backdrop4 {
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 1;
|
||
|
|
background: url("/extensions/^#identifier#^/backdrop.jpg") no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: cover;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
position: fixed;
|
||
|
|
filter: blur(200px);
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
.backdrop {animation: backdrop 60s infinite linear, backdropstart 2.1s; opacity: 0.9; left: 10%; scale: 0.96}
|
||
|
|
.backdrop2 {animation: backdrop2 50s infinite linear, backdropstart2 2.4s; opacity: 0.5; top: 20%; cale: 1.5}
|
||
|
|
.backdrop3 {animation: backdrop3 70s infinite linear, backdropstart3 2.7s; opacity: 0.8; bottom: 60%; scale: 0.8}
|
||
|
|
.backdrop4 {animation: backdrop4 40s infinite linear, backdropstart4 2.9s; opacity: 0.7; left: 5%; top: 10%; scale: 0.8}
|